430

February 9th, 2022 × #technology#webdev#JavaScript

Creator of Wordle - Josh Wardle

Josh Wardle, creator of Wordle, joins to discuss building the insanely viral web game using vanilla JavaScript and web components. He shares the origins, growth timeline, technology decisions, and sale to The New York Times.

or
Topic 0 00:00

Transcript

Announcer

You're listening to Syntax, the podcast with the tastiest web development treats out there. Strap yourself in and get ready. Here is Scott Talinski and Wes Boss.

Topic 1 00:11

Wes introduces himself and Scott

Wes Bos

Welcome to Syntax. This is the podcast with the tastiest web development treats out there. Syntax is 5 letters.

Wes Bos

No. It's not. That's why I it.

Wes Bos

No. My god. Y n t a. Okay. You know what? That's 6 letters. Okay. Wes, Come on. The you made the logo. The logo is symmetrical. Oh, you're right. You're right. Okay. Anyways, why are we talking about 5 letters? Because today, we have a guest on the show.

Topic 2 00:35

Wes provides background on Wordle's popularity

Wes Bos

Rid. We've got Josh Wardle of Wardle, the the hit game. If you haven't if you've been living under a rock for the last, month or I don't have any. Sure. We'll we'll talk about that as part of the podcast.

Topic 3 00:48

Wes introduces guest Josh Wardle, creator of Wordle

Wes Bos

Josh created the hugely popular Wordle game.

Wes Bos

And rid. Just out of nowhere, Josh sent me an email. I said, hey. I listened to the podcast. I made Wordle.

Wes Bos

And I was like, oh, that thing. And rid. He said he's like, I'm surprised you you send the email back. And I said, I'm glad you emailed because I had blocked the word on Twitter When it started blowing up I did too. Yeah. I was like, what are these boxes everyone is posting? And I was like, this is annoying, and I I put it in there. And then rid. I went to visit my parents, and my dad goes, hey.

Wes Bos

Have you been playing Wordle? And I said, no. Like, that rid. Is that what those boxes are that everyone says? He's like, yeah. It's amazing. I was like, alright. I'll try it out. I was like, this is really fun, and I'm addicted. My whole family is playing it. And my dad was like, That's amazing that this guy sends you an email because he, obviously, is a very busy guy right now.

Scott Tolinski

Yeah. So welcome, Josh. You know, Wes, my wife did the same thing. She was like, have you heard of Wordle? And I was like, yeah. Josh is coming on the podcast, like, tomorrow.

Scott Tolinski

He's like, what? Rid. Yeah. It's it's everywhere. Yeah.

Wes Bos

It's it's this is like a legitimizer moment for me to the rest of the world because, like, most Yeah. You just dick around on the computer all day, but now people understand what it is we do. Right?

Scott Tolinski

Make world.

Wes Bos

Welcome,

Guest 3

Josh. Thanks for coming on. Wow. Thank you, thank you very much for having me. Even though you were both confided in me that you blocked Whirl On Twitter. I'm still very happy to be here. I only blocked it not because I didn't want to play it, because I did play it, but only because The green boxes were filling my timeline.

Topic 4 02:29

Josh discusses how Wordle went viral through sharing on social media

Guest 3

Yes. Oh, yeah. Yeah. And we can get into that. There's some really interesting stuff going on there that's like you You know, I made a bunch of decisions when making the game kind of around trying to do the opposite of what games normally do. And but bizarrely, the green boxes, I think if you were to look at it, they they they

Wes Bos

might be considered spammy in some regards, but we can, yeah, we can get into that stuff. It's interesting. Yeah. There's a lot there. Let let's let's honestly, let's just people are so interested in that. Like, we we can get into your history and all that in a sec, but, like, let's talk about it. Like, Why did this blow up? Are the green boxes part of it? Like, what do you think about that? And then we'll obviously get into the tech behind it as well.

Guest 3

Yeah. So I think, firstly, I need to I I think the green boxes did play a a large part in, Yeah. Wordle getting big. So it actually it got a shout out. There's a technologist, Andy Bio, who, He found out about it and shared on a blog, and he gets a lot of readers.

Guest 3

And then it got, picked up by a New York Times newsletter. And this was before the that Emoji grids, the sharing function that we're referring to existed.

Guest 3

And but off the back of that, it got popular, for some reason that I still don't understand, in New Zealand.

Guest 3

And I'm told that the Twitterverse in New Zealand is quite interconnected. It's fairly small population wise, so people tend to follow one another. So it's a really good place for something to go viral, essentially.

Guest 3

And, one of the players there at that point, when you wanted to share How you done? Yeah. You would just say, like, Wordle in 3 or something. Mhmm. And, one of the players there, who I don't know, a woman called Elizabeth s, She came up with the idea of typing out her results as an emoji grid. And and the emoji grid is a way of sharing how you did in the game, but without spoiling it For others. You know, it it's Wordle is a word game. There's 1 puzzle a day and it's the same puzzle for everyone. So if you tell someone the solution, you ruin it and they can't play it. And so she invented this way of, sharing you kind of share your story, the journey you took to get to the answer. Yeah. And, and then I saw other people Started to do that as well. And and they were spending the time, like, opening up the emoji keyboard, like, typing it out, and I was like, I can just I've got the game state. I can just Yeah. Plop it into emoji. Yeah. That was the like, it would it was getting big at that point, but then I think that was, like, the catalyst That allowed it to really spread

Topic 5 03:52

Discussion of Wordle's popularity in New Zealand

Wes Bos

in the way it has done. Like, when did it get popular? Because in in my world, I had just heard about it, like, I don't know, maybe 3 weeks ago, it rid Started popping up. Like, what's the timeline to when you release this thing to today, which is we should tell users, like, you ended up selling the whole thing to New York Times. Congratulations. That was amazing. Congrats. Thank you.

Topic 6 04:55

Josh outlines Wordle's growth timeline

Guest 3

Yeah. So I I mean, it's weird. Right? It's a website. And this is another thing. There's no app. There's nothing it is a a part of my personal domain. Yeah. Yeah. Which is completely impossible to memorize. So So you have to Google Wordle every day, which is like another one of the things that is like a bit counterintuitive.

Topic 7 05:15

Josh sold Wordle to the New York Times

Guest 3

But, yeah. So when does a website Launch. Like, when does the game it's like the website's been available since, like, January of last year. My partner and I I I made the game for my partner, actually, is the is the story. She really enjoys word games. New York Times has a game called Spelling Bee. It's very popular. It's like, and we do the crossword together. So I was trying to make a game that she would enjoy. And so she and I have been playing since January last year. I introduced my I kinda made it more public, in, like, June, when I introduced my family and some friends to it. And then it really started taking off in, like, October. And then November was when the the All this stuff happened, and I introduced the share grid. And so it's literally been over the last I think I said at the beginning of November.

Guest 3

No. May yeah. Beginning of November, there were maybe 90 people who played. Nine zero were playing a day. And, like, yesterday, there are a lot more than that. How can you tell us how many? I'm a little cagey about that, but it's more than more than 10,000,000 people a day playing with the movies. Oh my gosh. Yeah. That's rid Wild. That is so wild.

Topic 8 06:17

Josh reveals Wordle has over 10 million daily players

Wes Bos

That's so wild. And I love stories like this because, rid. Developers are creative people. We love to to poke around, and I love seeing I I took a little bit of a we can talk about what your background is next, but rid. I just love hearing stories of people who are just out to build stuff for fun and just, like, obviously, for your partner. Right? And then rid. Before you know it, the thing explodes and gets extremely popular. And I honestly think that's how you you sort of strike on a lot of these hits is just by, rid Like, I I don't know. Like like, what is your background? Like, maybe we should go down that. It's like, what's your background? Are you a are you a coder? Why do you listen to this podcast? Rid. How did you build the thing? Let's let's get into

Topic 9 06:37

Reaction to Wordle's massive growth

Guest 3

that. Yeah. So my background is actually in art.

Topic 10 07:22

Josh discusses his background in art and product management

Guest 3

Like, I did a A fine art degree. I'm so I'm from the UK originally. I live in the US now.

Guest 3

But, yeah, I did a I did a master's in art at the University of Oregon. And then, Due to some visa the way visas work in the US, I had to get a job related to my field of study. And I'd done digital art, I figured. When I was in Oregon, I figured either Seattle or San Francisco seemed like good places to get a job. I ended up choosing San Francisco.

Guest 3

And very randomly, I saw a posting on Reddit, looking for a part time artist. And And I I was using Reddit a lot that time. This was in, like, 2012.

Guest 3

So I responded and I ended up getting a this really random job at Reddit. And this was when Reddit was, like, it was, like, 15 people? 12, 15 people? Something like that. It was tiny.

Guest 3

But, like, the it was all already had, You know, massive amounts of traffic.

Topic 11 08:15

Josh worked at Reddit when it was still small

Guest 3

And so I was doing this kind of weird stuff. I had no technical background. Like, I played around with stuff a little.

Guest 3

And through Reddit, I was exposed to a lot of, like, technical stuff, and I ended up becoming what's called in Silicon Valley as a product manager.

Guest 3

You kind of zip between Yeah.

Guest 3

The developers often have very, very skeptical about that makes us sit in meetings all day. Right? Yeah. Yeah. Exactly. Exactly. But yeah. So product managers kinda sits between, like, design, business, and engineering. And then you're also charged with, like, you know, you have to come up Tech companies in Silicon Valley, you're like they often described as like mini CEO. Like, they give you one area of the product and you are responsible for making all the decisions around that as long as they're in line with the company. So I ended up kind of in that position at Reddit. And, I did that for a long time, and I got the opportunity there. You need that. I did some, Reddit does these big April fools day projects. Yeah. Oh, yeah. Yeah. I, I had a few of those that were incredibly, that Did really really well. One was called The Button and one was called Place, which was like this large collaborative canvas. And those projects were amazing to do. They're like these creative.

Topic 12 09:27

Josh discusses Reddit April Fools projects

Guest 3

They're more like social experiments exploring the way that, like, people interact online and, like, trying to kind of playfully explore some of the, like, heinous issues That we have online at the moment. And also super viral too. Like, I mean, everybody shares those things like crazy, especially the plate. Yeah. Yeah. Yeah.

Guest 3

And, then I had re like, I was getting pretty burned out. I've been at Reddit for a long, like, 6 years at that point as a product manager, I was pretty burnt out on the part of being a product manager that I always enjoyed the most actually was conversations with engineers. I really liked talking about how they were gonna do something, the technical details. And like when you're working in a really cross functional role like that, Having an understanding of how things are done technically is really useful. And it gives you credibility when chatting with engineers. Right? Like, I'm sure we've all had experiences where you're chatting with someone and they have the best of intentions, but you can tell that they don't really understand. You you can't communicate about the technical stuff. And it's not through any fault of their own, but it just makes

Wes Bos

Conversation's hard. Whereas if you have a conversation with someone like that who isn't a developer but does have a technical understanding, I think it can just make the whole process go so much better. The best Like, when I worked at a boot camp, we had a lot of, like, project managers come in, and they're like, I'm not looking to become a dev here. I just, like I need to be able to talk the talk and understand Yeah. Right. Like, what these These little computer Gremlins are doing it. Yeah. You know?

Topic 13 10:27

Value of understanding tech details as product manager

Guest 3

Yeah. So then I I left Reddit. I went to a boot camp, in fact, in San Francisco, like, front end focused. It's called Hack Reactor. And then after that, I got a job at, Pinterest as a front end developer, as a software engineer.

Topic 14 11:02

Josh transitioned into software engineering

Guest 3

And recently went back to Reddit, also as a engineer this time. Mhmm. And then recently Wow. And then I created Wordle, and then I recently left, Reddit. And now I work for, like, this Art art collective in Brooklyn. It's pretty wild. Wow. Yeah. You've been everywhere. Yeah. That is my life my life story. Yeah. There's no more

Wes Bos

rid. That's you you so you've probably written lines of code that, like, most of the world has laid eyes on, Which is some of the biggest websites ever. Well, that would be amazing to trace. It's like how many lines of code have you written that

Scott Tolinski

rid What percentage of the population is the I bet it's outrageous.

Guest 3

Yeah. Well Yeah. And and here's a secret. The lines of code are probably terrible That's my yeah. That's it. It's like, I'm I'm like, I'm making this stuff up as I go. And that was actually a really big part doing Wordle. So, like, working at pin like, Going through boot camp and working at Pinterest and Reddit, like, there are some really really smart people at those companies. Way smarter than me, way better developers, And I got to work in the frameworks that they had set up. Like, really smart people have thought about the difficult problems with front end development, I made like tools or component libraries. And I was just kind of it was like playing with Lego that someone else had built. And so, it was really easy to develop front end stuff. But rid I it it actually kept me away from a lot of the things I think basically, when I build word myself, I had to solve a bunch of problems that previously had been solved for me, but I didn't even know that they had been solved for me because it was all like Magic a magic black box. So Somebody else Yeah. Yeah. Smarter than you had taken care of already. I we often say that about, like like, frameworks and and even TypeScript and stuff like that. It's like

Wes Bos

rid Like, we're just you means like, most of us developers listening to this podcast, we're just, like, users at the end of the day. We're just using these Big libraries and frameworks that somebody else has built, and they've jumped into a lot of these jumped through a lot of hoops in order to make it easy for us to To use at the end of the day. Yeah. And that that's actually,

Topic 15 12:39

Frameworks hide complexity of web development

Guest 3

so, my most of my experience up until like, I started learning rid. Front end development, basically, in 2018 started with React.

Guest 3

And I think I'm not sure. I'm sure you 2 both have had Much longer careers with front end development, and maybe some jQuery days, maybe some days before that. But it's interesting to me that, like, React, I think it's it's a great developer experience. I love using it as a developer, but I think it kind of hid a lot of what was going on To me, I learned React, basically. I didn't have a good understanding of the DOM or, like, vanilla JavaScript. And so one of the things I wanted to do with Wordle was Try not to use a framework like that. And that's been remarkable in teaching me things I I in terms of Becoming a better engineer, like, just writing vanilla JavaScript and using regular HTML elements and and styling and stuff like that has taught me So much. And I I think it's great that people use React. I think it's amazing. But from my experience,

Wes Bos

having this Shifting and just writing HTML, CSS, and JavaScript was a really eye opening experience. Oh, man. I'm so glad you say that because, like, I, Scott and I say that all the time. Like, you have to know how these things work. And, like, I also like, I when I learned JavaScript, I went rid. Straight into jQuery, and then I had to sort of backpedal over the years to actually learn, like, regular JavaScript.

Topic 16 13:59

Benefits of learning web fundamentals before frameworks

Wes Bos

And you see that a lot now is people just jump straight into React, which is it's not bad. Like, certainly, you have to just get Building stuff as well, but there's something so beautiful about being able to

Scott Tolinski

use just the underlying tech to build something as It's complicated as, like, a game like this. And sometimes it's easier too than you might have expected, and sometimes it's harder. But, like, For instance, I just recorded a video yesterday, West.

Topic 17 14:34

Most developers use tools built by others

Scott Tolinski

And it was like, you don't need a dependency for and the the video is the clipboard API.

Scott Tolinski

And I was looking and there's a React clipboard API hook that has 700,000 weekly downloads or something. And I'm just thinking, What? In fact, it's more lines of code to import and use that hook than it is to just use navigator.clipboard.writetext.

Topic 18 15:09

Browser APIs vs third party libraries

Scott Tolinski

And it's just like, why? Why is anybody doing this? And if you look at the the package, it's only a 100 lines of code or whatever, and it's mostly just to check if you have IE 11. And and that is the the barrier there. It's like You you're not learning the DOM. You're learning yeah. I mean, these browser APIs are are amazing. There's so many cool things you can do with them. And I and it is funny, the lengths that people go to to not learn that stuff. Yeah. Yeah. And I think Wes' earlier point is really interesting in that regard. Right? Like, I think most people do this stuff because they wanna achieve

Topic 19 15:40

Focusing on end goal vs understanding details

Guest 3

something. Right? Like, you have a goal, you have an app idea, or you just need that thing copied to clipboard.

Guest 3

And for for for a lot of time, I think and I think it's great just to, like, focus on building the thing and getting it done. Yeah. But as you get a bit Further on, being able to ask, well, be curious about, like, well, how does that work? So And and, like, explore that stuff. And I think, Yeah. It's very interesting you mentioned that, like, Wordle has 2 external dependencies, that ship to the to the client. And one of them is a clipboard Oh, nice. Yeah. Copied to clipboard polyfill that actually broke things, for me. But or, like, You know, it's I think it's like, DuckDuckGo doesn't it doesn't like or something like one of the one of the more privacy focused browsers. But even even then, it it was I was trying to do the thing myself, and it was working pretty well. And then I was like, I I'm gonna go to the experts on this, downloaded a polyfill, but, actually, It's just someone doing a similar thing to me, but they're handling different cases. And so it made it better for some people, but made it worse for other people, which I thought was really interesting. Yeah.

Scott Tolinski

Hey. Let's actually take a quick break to talk about one of our sponsors before we, go any further.

Scott Tolinski

One of our sponsors today is century@century.i0.

Scott Tolinski

And now I would imagine if you're writing a project that is going to be used by tens of millions People that you probably want some way to track your errors and exceptions because maybe the clipboard API breaks in error. Yeah. You have a bug In your in your polyfill or clipboard API that breaks something, you probably gonna wanna figure that out. So century.i0, s e n t r y dot I o is the perfect place to track all of your errors and exceptions. If you use the coupon code at tasty Treat all lower case, all one word. You'll get 2 months for free. And, again, this is a a really cool service because it tracks your your errors and exceptions, puts them in a big Table, a big database where you can say, oh, I fixed this. Oh, this thing, broke again. Oopsies.

Scott Tolinski

This is tied to this release. This is tied to this specific user, And it's a really great way to stay organized when you have a big project that potentially has a lot of bugs because let's face it, none nobody writes code without bugs. That's just how it works.

Scott Tolinski

So thanks so much for Century for sponsoring century.i0,

Wes Bos

coupon code tasty treat, and you'll get 2 months for free. Alright. Let Let's talk about the actual tech stack of because I asked on Twitter, like, what do you wanna talk about, when the Wordle Guy comes on podcast? And rid. So many people were amazed, like, because everybody's viewing source and, and, like, it's amazing. If you open up the network tab, rid. It's just like it loads, like, it like, 3 requests to load the entire game, and there's no XHR request, and it doesn't seem like there's any back end. So, like like, what's the stack for this Wildly popular game.

Wes Bos

It seems like most people would go out and get venture capital funding for a time like this, and and you just built it in Just JavaScript? How does it work? Yeah.

Topic 20 18:21

Wordle uses vanilla JS and web components

Guest 3

Great great question.

Guest 3

So right. Like, to go back to the original point, I was building a game for my partner. So it didn't have to be I I just, like, I could just build a client side app for this. Right. It's a guessing game. So, People enter words, and there's a hidden word each day. So just there, there's some validation questions. I need to select the winning word each day, And I need to validate is the thing you're entering actually a word? I think if you were building a, you know, a proper game, for one of the backward, you would use a back end for those things. I didn't have to worry about that because I was just building a game for my partner and I. It was never meant to go viral. So I just Shoved everything, on the on the client. So it uses, web components, which, was fairly new to me.

Guest 3

Web components are actually it's like a native, Browser spec, I I guess you would call it. It's com Yep. Combined of, 3 things, custom elements, The, Shadow DOM, which is a method of of encapsulating CSS, and then, HTML templates.

Topic 21 19:19

Overview of web components

Guest 3

And the best way I've actually heard to describe it is if you think about something like the select elements, which you nest option elements inside of, And it renders a drop down for you.

Guest 3

Clearly, there's some magic going on there. Right? When you combine these elements, these HTML elements, Something there's some JavaScript running somewhere, but you as a developer, you kind of don't know about that. Yeah. That's kind of how I think, and and this may be incorrect. Like, I'm I'm very new to to web components, but that's how I conceptually model web components in my in in my head. It's a way of writing components that are kind of look like native elements. Right? But Yeah. They can have this magic that's kind of hidden from you, and and it happens in the background. Totally. Like, I'm just I'm just viewing source on it, and you've got a I'm sorry, Wes.

Scott Tolinski

App game app rid Tag. I love the I'm sorry, Wes, when the viewing source, that's yes. That's hilarious. No. Hey. People on Twitter were saying Scott's gonna,

Topic 22 20:23

Wes notices Wordle's custom HTML elements

Wes Bos

no. It's too early to be out there. HTML elements. No. But, like, you did like, you made your own HTML elements. That's what that's what web components are. You have an app component Or an app element, a theme component.

Topic 23 20:45

Keyboard is its own web component

Wes Bos

Each row has its own web component, and then every rid. Hyle has its own web component. I'm assuming the keyboard is its own component. And this is just, like, a great use case for Like, Scott and I were always saying, like, why don't we see, like, more stuff being built in web components? And here we are seeing a a a really nice game being built in it. And and one thing, so this was the 1st project I've built with and and I'm using there are, like, frameworks that wrap around,

Guest 3

web components that make them Yeah. Bit more comparable To something like React. So I think LitElement, which is one made by Google is very very popular.

Topic 24 21:13

Josh used low-level web component APIs

Guest 3

And, what I'm using is kind of the the thing that Lit wraps around so the native, web component API, which means, you know, if you've ever built a project for the 1st time using a new technology, I'm doing a bunch of things incorrectly like React's, React's, approach to like state and props, lifting state up, and and concepts like that I found so useful when I was learning as a developer. It's like Really opinionated, and it tells you how it wants to be used kind of with, web components because it is essentially I'm just using, native, You know, web APIs, it's kinda up to you. And you can have, like, listeners anywhere and, like, events firing. And Yeah. Throughout the app, Throughout Wordle, I actually use multiple different ways of kind of achieving the same thing, and it's me exploring which one of these, like, what works and what doesn't work. And, again, if you're building an app to go viral, that probably isn't the approach you want to do. You probably wanna use the technology you're really comfortable with, but, that's kind of just the way just the way this thing Panned out. So how did how did you find working with web components close to the metal here? Because I I did a course on it, and

Scott Tolinski

You know what? It was there my experience with web components was largely that there's a lot of different ways to do things in web components. Did you did you have, like would you would you reach for web components again given the opportunity? Would you reach for maybe a wrapper library

Topic 25 22:29

Scott asks about Josh's experience with web components

Guest 3

Like, lit or I think stencil maybe is one of them, or or would you, yeah, would you go straight to the metal again? I I yeah. I think that's a really good Question. And as I mentioned earlier, for me, using vanilla web components was really valuable.

Topic 26 22:57

Josh would consider a wrapper library next time

Guest 3

It this period in my career because it taught me a lot. Like, I had to learn a lot about how, Like basic, like the DOM, web APIs, stuff like that. Template, creating the elements, attaching event listeners. Yeah. Oh, yeah. Exactly. And that I think there's a certain degree of, like, muscle memory and repetition that's actually valuable to, like, figure out how these work. That that said, just something that's So easy as like getting the component to update when an attribute changes is there's there's quite a lot of boiler plate that you have to do, each time. And I think rappers like Lit, You know, make that stuff way way easier, to do. And and to your point, if I was going to build another project, I think I would think a lot about the complexity A bit like Wordle is pretty simple at the end of the day. Yeah. So something that size is good. If I, you know, I think if it was to get much more complicated, I I might consider, you know, trying to learn lit or something like that. But having a having a fundamental understanding,

Topic 27 23:51

Learning fundamentals was valuable

Scott Tolinski

I I think is really, Really strong as we talked about. Yeah. And you're not shipping I mean, you're not shipping a ton of code for it. It's not like I mean, how how big is React? How big is? I don't I don't actually know anything about the size of litter if what it's, adding on to your project if anything. But, this allows you to, you know, Really deal directly with DOM APIs.

Guest 3

Yeah. I I checked before we, started chatting. So, non gzipped Wordle is like 250 Kilobytes, g zipped, it's about sick 60.

Topic 28 24:11

Wordle frontend is only 250KB

Guest 3

And then almost half of that weight is just the word list. I'm not doing any fancy compression. I'm sure there's ways that I could, like, use some smart algorithm to, you know, compress that further. And then, Bizarrely, I mentioned I have 2 external dependencies.

Guest 3

1 is that, the polyfill.

Guest 3

The other 1 is I had to do an object merge, And I'm like, I know I'm not messing it up. So I'm using Lodash, and and that that's accounting for almost 20% of the so the wordless is 50%. Loadash is 20%. And then, so only only, like, 30% of the bundle is the actual web components JavaScript, which is Oh, man. Remarkable. And, again, if I was smarter, this is my first project using Rollup, which was really good. I I like JavaScript build systems. Oh, yeah. Yeah. Absolutely.

Topic 29 25:08

Josh built Wordle with Rollup

Guest 3

It's a testable. And and Rollup have been recommended to me as one of the ones that, like, kinda makes it's not webpack A bit more straightforward.

Guest 3

I I do wonder if I was a bit smarter or could spend a bit longer, I could get the I'm not sure exactly if Lodash is being because I'm only using 1 function, object merge. Maybe there's some tree shaking stuff, but, or maybe I should just write and maybe I should Suck it up and write my own object merge function. I don't know. So people that are this this happens all the time.

Wes Bos

You can install each Lodash function on its own, which I'm pretty sure you you're doing looking at the size of your Yeah. Yeah. I am. It's just remarkable to me how big, How much comes with that one function? And obviously, this is because these things are actually quite complicated. And I'm I'm I just wanna, like, Install it and forget it. But, there's a we've talked about the sound of the podcast before. There's a a package from Angus Kroll called just. Mhmm. And he has Every single one is no dependencies, and there is just dash merge.

Topic 30 25:37

Most of bundle is word list and Lodash merge

Wes Bos

I wonder how big, how big it is. I'm gonna look it up right now. Index. Js. Just merge is tiny. I mean, they're all tiny.

Scott Tolinski

They're like bytes. Yeah.

Wes Bos

Yeah. It's, 21 lines of code For just merge. So you could probably yeah. But, like, it's not like it's it's not like you're you're hard up. Right? Like, 50 You should be doing nothing. Yeah. You already did. Turned on. Yeah. And and rid. And also, let let's talk about that gzip. You said, oh, I'm sure there's an algorithm that could, make the wordless smaller. But, like, that's what gzip does. It takes, like, rid. Like, if, if you have the letter h a 1000 times, it doesn't have to send that h a 1000 times over the wire. It It just adds at once, and I don't know. It's smart enough to

Topic 31 26:18

Wes suggests smaller Lodash merge alternative

Guest 3

inflate it again. I mentioned that because I saw, like, a computer science y person on Twitter being like, hey. You could've done this better. And so I just assumed Oh, come on. I assumed that was that was correct.

Guest 3

It is interesting though, like, at this, you know, part of what has allowed Wordle, And and we kinda touched on this earlier.

Topic 32 27:08

No backend aided viral spread

Guest 3

Allowed it to go viral is that there's no back end. Right? Like, if I was trying to scale a back end at the same time, I would be it would be maddening, I think.

Guest 3

And, even even getting the front ends set up like this originally, it was host on hosted on my, like, Shared hosting that I bought in college that had, like, a a 50 gigabyte bandwidth limit, but I never used more than previously, like, 20 megabytes, A month or anything. Oh my goodness. And then I started, you know, tearing through it. So, fortunately, through through working at Reddit, I got to meet some some of my friends who are incredibly smart people. So, I work with 1 of them to, set up CloudFlare, put CloudFlare in front of it, because it it's all static assets. Most of it can be cached. And then that, like, you know, cut things down, you know, like 99% of requests are getting served by Cloudflare. But even at the volume of traffic for Wordle, rid I was gonna overflow the the 50 gigabyte monthly limit. So then we migrated it to, AWS s 3. And, there are a bunch of optimizations you could do there. Right? We talked a little bit about reducing the bundle size.

Topic 33 28:14

Optimizations for going viral

Guest 3

Another one would be, I think, because the assets don't change very off. Often, I could increase the time to live on the on the caching would be another Yep. Approach. All in all, These were no longer my problem, actually. The New York Times can figure out what you mean. I'm sure they can they can handle. Yeah.

Topic 34 28:30

Low hosting costs despite huge traffic

Wes Bos

How wild is it, like, rid. When you get to the scale that you're looking at a 200 k website and you're you're literally worried about Cost. You know? Like, that that's how large some of these things are. Like, I remember, forget who it was.

Wes Bos

Some I talked to somebody who, like, sent out millions and millions and millions of emails. And they said for every letter they put in the email, it was Like, a gig of of bandwidth that was being sent. And it's just like like, oh, wow. Like, you you accidentally put an exclamation mark. Like, do you wanna Do you really like, let's say you're doing 10¢ per gig or something like that. Do you really wanna spend 50¢ 50¢ on an exclamation mark?

Scott Tolinski

This is such a good lesson though for People who feel like things need to be overly engineered or overly complicated to have something that is good that people uses. Like, that that you can make something that is This, I don't know, viral or incredible or fun or or or any of these things that that Wordle is with just Absolutely shipping nothing while still having it be primarily a JavaScript based app. I mean, it's it's really wild. Are you able to tell us how much rid It did it did cost you to host it? I'm always curious.

Guest 3

I think my AWS bill is gonna be a little over $100 For January, January has been a a bumper a bumper month. I pay more than that for some smokes. That's amazing.

Topic 35 29:44

Anecdote about email cost per letter

Wes Bos

And then people are wondering, like, well, how does it remember my streak? You know? Like, I don't have an account.

Wes Bos

So, what's that using? I'll let you go into it. Yeah. So So that's using the,

Guest 3

the local storage.

Topic 36 30:07

Local storage used for stats and streaks

Guest 3

So, one of the things one of the big things I was keen on with Wordle is not to do a bunch of the things that you're meant to do If your goal is to grow something or make it go viral, so, there's no, login. Like, I don't ask you to create an account. I don't collect any personal information.

Guest 3

A byproduct of that is that I'm I'm local storage is per browser, essentially. Per device, per browser.

Topic 37 30:25

No logins or accounts

Guest 3

So it kind of Ties you in a little bit. It ties the player in. They have to if they want their streak to be maintained, they have to play on the same device each day. Yeah. Which from a user experience perspective is not Ideal. But, again, in terms of technical complexity, right, if I'm then thinking about logins and then I'm thinking about managing people's data, like, I don't wanna I don't wanna do that. And, like, for a simple game like this, it's like so low stakes.

Topic 38 30:56

Keeping it simple aligned with Josh's goals

Scott Tolinski

Keeping it free and simple was a really big part of, my goal. So not having ads on it is also also a big part of that. Yeah. I mean, think about Yeah. Think about that aspect. You have user accounts and suddenly you have a database. You have ten 1,000,000 users or whatever. You have 10,000,000 records of user data now that you're having to worry about sharding and scaling your database and All of that like that, that sounds like a a total nightmare and a huge cost. I mean, you can tremendous cost. Also,

Guest 3

responsibility in terms of people's Person made it. Right? Yeah. And it's like that you mentioned earlier, like, just building some it's some you something could go viral even if it's just fun, even if it is the tech rid. Stack isn't, you know, amazingly complicated. Yeah. I, unfortunately,

Topic 39 31:23

Monetization would introduce complexity

Wes Bos

was digging around for this podcast, and I found the word of the day in local storage. Oh, yeah.

Topic 40 31:37

Josh wasn't trying to build a business

Wes Bos

And And I'm a bit bummed because, like, every day, my wife and I do it after the kids go to bed.

Scott Tolinski

And Oh, of course, Wes has gotta ruin the game for himself.

Wes Bos

Rid So around.

Guest 3

This is one of the things, knowing what I know now. This is a really common piece of feedback. One is that all the words in order in a just in an array. So, like, every day, there's an offset from the launch day, which gives me a index in that array, and that is the word. So you can just go and look up, and there's, like, enough Words for about 5 years. So you can go and look up what the word is gonna be tomorrow and the next day. I kinda don't worry too much about that because it's like if you're doing a Puzzle in the newspaper, you can turn the newspaper upside down and read the answers. Right? Like, it's You're if you're doing a crossword, the New York Times crossword, you could just Google New York Time's proper today. Like, if you wanna ruin the game for yourself, go go right ahead. You know? That that what's what's the re what's the purpose of doing that, You know? Do you guys get this a lot? People email me, and they're like, I'm not sure if you're aware. Oh, yeah. Dude. Confused on. I was like, I wrote the game. I I know Yeah. I know. I know I know what's there. Thank you. Oh my gosh. I I really appreciate it. But, yeah, to your point, Wes, having the so when debugging the game locally, it's really useful to be able to see what the words are, obviously. Knowing what I know now, I probably would have, maybe wrote 13, the word list. Are you you both familiar with that Algorithm No.

Topic 41 33:01

Scott suggests encrypting word list

Guest 3

It is What is that? It is you offset, like, each character by 13 characters. The alphabet is 26 letters.

Guest 3

So if you just add 13 to the char code, it spambles it, but the, the the method that you use to encode is Is also the method used to decode. Mhmm. So it you only need 1 function and it doesn't care, you know, which state it's in. And it just it's a quick way Like, obviously, you could memorize, you know, the a 13 letters away. I don't know. It's like m y n or something. But it's just a quick way of not having feel bad moments Like this. So where I I actually had to add that function from some of my analytics stuff because, it was ruining people in New Zealand Play way in advance of me, and then I was seeing events coming through that had the answer. But I needed to be checking analytics at that time because I was using it to, like, monitor errors.

Topic 42 33:52

Wes accidentally discovered upcoming words

Wes Bos

And so, I added it so I don't it didn't get ruined for me. Sorry, Wes, but you The here's a question. So do you play it every day? I thought, Oh, he probably knows all the words, but you, yourself, don't even know the words. I I don't wanna ruin it for you if you've done it today. I know. I I I play it every morning. So part of the game, like,

Guest 3

part of the game well, the goal of the game, as I said, was to build a game for my partner that she and I would like playing. So in order to do that fun. I love it. I had to random what I did, we filtered there were, like, 13,005 letter words in the English language. A bunch of them are like really bogus. Like, you've never heard of, and they just look like nonsense.

Guest 3

So we actually put a fair amount of time in filtering those down to about 2 a half 1000. And then I basically randomized that list, Didn't look at it. Shoved it in the in the code.

Topic 43 34:27

Josh randomized full word list

Guest 3

And so it means I can play every day. But the downside is I don't know what the word is gonna be tomorrow, and I live in constant fear That some word has slipped through our filter that people don't know or it maybe has a connotation that I didn't anticipate or so that's Like, that's moderately terrifying, but yeah.

Wes Bos

Oh, we so in one of my courses, we build a, like, a randomizer for, store names.

Topic 44 34:56

Josh plays Wordle daily without knowing words

Wes Bos

Rid. And every now and then, you'll get one, like it's, like, outrageously drab wives or something like that. And somebody will screenshot it and get super mad or send me email. I'm like, rid. It's it's not it's it's random. It's the computer. Right? So you have to like, I like, I kind of went through and took a few out. It's like, oh, Possibly a bad combo, but, yeah, you could especially with the the kids and their slang these days, you don't know. Like, the the word of The day today is very popular in Canada, so I thought that was very, very odd.

Topic 45 35:34

Discussion of occasional problematic words

Wes Bos

Wait. Can we say it? Because it's By the time listen to this When will this point go out for a while? Right? Yeah. Yeah. Yeah. Go for it. So the word of the day today is moist, which is, rid

Scott Tolinski

our, prime minister, when COVID was popular, he told people, please do not breathe moistly. You know what? Some people really we we talked about how some people really hate that word. I wonder if this one's going to be controversial.

Guest 3

Yeah. No. I I it was blowing up on Twitter this morning, and I think For that reason, and I think it's interesting to me. Like, I don't you know, I I I know why people it has, like, connotations. I I think there's something interesting about that word where what it describes is also how the word sounds when you say it. Right? Moist. Yeah. That it has this quality. I'm sure there's some linguistic Phenomenon there that, like, someone really smart will know what it means. But I think that's really interesting. When a word either looks like or sounds,

Wes Bos

rid. In the way it conveys the thing? Yeah. I don't know. Yeah. Oh, man. Let's, let's take a quick break for one of our sponsors. That is rid. Sanity Sanity is the place where you put all the content for your website and for your application. So if You, yourself, wanted to make yourself a Wordle, and you wanted to actually build out a back end for the thing because you wanted, you wanted stats on that. You wanted to be able to rid. See the upcoming words.

Topic 46 36:26

Analysis of moist as a word

Wes Bos

Don't it have a CMS for all of your word of words? You could put sanity behind that. And, it's they do, obviously, To do a lot more than that, they have Sanity Studio, which is the whole CMS. You can create all your content types and relate them to each other.

Wes Bos

You could you could submit something and then somebody else could approve the word before you go out. Check it out for your next project. Go to sanity.

Wes Bos

Io Forward slash syntax. That's gonna get you double the free usage tier. Thank you, Sanity, for sponsoring.

Wes Bos

I'm curious. Like like, you obviously have had a couple hits rid. On the Internet.

Wes Bos

And you have, like, an art background. I wonder if that plays into it. But, like like, do you think that you have any like, are you just, like, dialed into human psychology, or do you have any do you have any, like, personality traits that you think might be are you constantly curious? Like, how do you come out with So many

Topic 47 37:27

How does Josh create viral hits?

Guest 3

of these hits on the Internet. That's a good question. I think if I knew I'm like, I've I've I've made a bunch of things that haven't been hits Actually, as well. Like and and that was something I've really wrestled with. Right? Like, if you have a hit and then the next thing you do isn't, it's like, what did I do wrong? Am I and, like, Where you get your validation from with those things, like, if people didn't like it, does that mean I'm no good? And and I struggle with that stuff, a lot. Rid I will say I think of myself as a curious person. I think that's kind of why I like Programming, it's, like, as deep as you want to get. You can keep on asking questions Yeah. Yeah. With computer stuff. And, like, I think also a Curiosity about humans, like, I think it's easy with programming to get sucked into the technical stuff. But at the end of the day, almost All things are built in service of humans.

Guest 3

And so thinking about people, like, And I I think Silicon Valley really struggles with this. Like, they hire incredibly smart technical people.

Topic 48 38:37

Josh focuses on serving humans

Guest 3

But understanding that rid The it's a human, you know? It's a meat bag using this thing at the end of, like, what are their emotions and compulsions, and what's driving them? And, rid Unfortunately, in Silicon Valley, that stuff kinda gets skewed into, you know you know, manipulation or, like, how can we take advantage of those things, you know, like, through, you know, a bunch of attention grabbing Stuff. And none of that I I really dislike that stuff. And so trying to believe in the good in people and, you know, treat people decently And and have a curiosity, has has really helped me. But I don't purport to know any have any deep insights or Anything like that. I'm I'm I'm just doing what is interesting to to me, and it's working for me. And I think I've Struggled in the past where I've set out to make a hit. You know, I've set out to make a viral game. And and and then my my Intentions are skewed, and it becomes hard to answer questions because I'm kinda doing it for the wrong or not the wrong, You know, it's fine if people want to do that stuff. But for me, personally, it's about being authentic to who I am, and I think that limits me in some ways. Right? Or, You know, in conventional ways, like, I'm not gonna make, you know, a ton of money in the in the Silicon Valley sense. Obviously, Wordle worked out really well for me in that regard. But, Yeah. In in terms of the opportunities avail available to me, it's a little different,

Scott Tolinski

than than conventional things. Yeah. May I mean, you probably just have some sort of intuitive, rid. Intuitive skill there that when you well, you said you try to surface it or try to use it, it just it it's not as you're, like, avoiding that intuitive part of your brain and more or less trying to use, like, some sort of, like, calculative part of your brain instead. So yeah. I mean, props on On the ability to make that kind of thing happen.

Topic 49 40:12

Intuition versus calculated decisions

Scott Tolinski

Did you are are you aware just like just how it it's so funny this thing is, like, blown up into to mainstream, but, like, You know what? I I was listening to a hockey podcast, and they, like, made their own version of this game called Gourdle about, like, hockey names where you have to guess hockey names and 5 guesses. Like, are you aware of how many permeations there are of this thing?

Topic 50 40:36

Authenticity enables viral hits

Guest 3

Yeah. Well, that that that I hadn't heard of that one. That one's That one's amazing. So I have a lot of thoughts here. So, the satire clones, like so firstly, because it's just client side JavaScript, You can just download it. And what people have done is downloaded it and swapped out the word list, you know, different languages or things like that. What people often forget to do is remove the analytics ID.

Guest 3

So, what I'm seeing is, I you know, a big list of, you know, oh, I didn't write I didn't write that one, coming coming through, Which, you know, I love the open web and, like, people playing with stuff like that. It on the on the on the flip side, there are a bunch of people who've just Cloned it and slapped ads on it. Put it into the App Store or any of that yeah. And truthfully, a lot of that sort of stuff was my motivation to To sell it, really. I found it really draining. Like, I I'd put this thing out there. I was giving it away for free and to see I'm, like, clearly, I'm giving it away for free, so I don't have an expectation to make money from it. But something about seeing other people so shamelessly take what I had done Totally. And use it for their own profit. And, like, even though that was money, I didn't want to be making the fact that they were. I I don't know. If it was not as I wish I could just be like, that's fine. That's them.

Topic 51 42:12

Coping with copycats was draining

Guest 3

But something about it just made me it just literally hurt me. Like, I just woke up feeling dreadful about that stuff. And so just taking a Wes and Wes and I would both definitely feel the same way because we have our content

Scott Tolinski

Our free content that we make with the purpose of being free stolen off of YouTube and then resold on Udemy or any of these other sites where people are Literally ripping our stuff off and then putting it up on the market. So I I I personally very much understand that pain because it's like it sucks to see somebody pay money for something

Guest 3

that you have given or created for free and with the intention of it being for free. Yeah. No. And I think I was it was very clear to me that I didn't wanna do this as a business. Right? Like, if I wanted Wordle to become my full time job, I probably could have figured out a way to do it. I would have had to figure out how to generate revenue from it in some way.

Topic 52 43:01

Monetization wasn't a priority

Guest 3

I think there are there are some non there's some methods of doing that that are aligned with my values, but I didn't want rid To do that, I've just started a new job. I'm really enjoying focusing on that. But because then I didn't wanna make it a business, it made Justifying spending time on all these other things, really, really hard to do, like, you know, paying a lawyer to, like, you know, deal with copycats and seasons. You know, all that stuff Just got really complicated and messy and with none of the things that I wanted to deal with when I set out to do it in the 1st place. And I think for some people who rid Their goal is to make a business, right, or make a app that goes viral. I think they look at that decision, and they don't really understand it. And and maybe From, if if money was my only motivation, maybe I didn't make the best decision. But given that, rid There were so many other factors for me personally Totally. When in and my personal stress was a really like, and just my health was a really big part of that. So, Yeah. We we totally get that. I yeah. Absolutely. I I probably make a lot of the same decisions personally. Because you you see a lot of people get to that. And before you know it, you are running a Wordle business

Topic 53 43:53

Deal process was complicated

Wes Bos

and, like, trying to you've got meetings with accountants and lawyers and, like, that's rid Not sometimes I find myself that, like, why did I spend my entire day having meetings with the professional services? Rid. I want a code, you know? And, like, for me, it's very important to get back to the the why I got into all of this.

Topic 54 44:10

Josh isn't business-oriented

Wes Bos

Rid. Let's talk about, actually selling it, though. Like, I'm we're not gonna pry too much. Be before we talk about selling it, if you were to sell Wordle, Well, how would you would you write an invoice in FreshBooks? I would go to FreshBooks and write an invoice and let them put turn credit card processing on and You'd pay the big old fee. Yeah. Rid No.

Topic 55 44:31

Authenticity enabled viral success

Wes Bos

FreshBooks is a cloud accounting software for your business.

Wes Bos

We just talked about professional services.

Wes Bos

I rid. Recently added my accountant directly into my own FreshBooks. They allow you to do that for free.

Wes Bos

You don't have to pay extra for that, and it's Great. Because they just go in and grab all your expenses, all of your invoices for the year. Anything that you have in there, they can see it all real time. You don't have to say, ah, here's the updated rid. Excel file. Don't the old one is not any good anymore. It's all all great. So check it out. Freshbooks.comforward/syntax.

Wes Bos

Rid. You're gonna get a 30 day unrestricted free trial. Thank you, FreshBooks, for sponsoring. Alright. So let's talk about, like, selling this thing. I'm just curious, like, the process rid to to selling something like this and people approaching you. Because, like, in my past, I've had I used to have, like, this daily deal aggregator.

Topic 56 45:38

Wes introduces sponsor FreshBooks

Wes Bos

Rid. And when that that's that thing blew up on me, and I had I had people in my inbox all day long, venture capitalists, people who wanted to buy it. And I was just kinda like, I've like, I'm I'm 21. I don't know I don't know what to do with this. You know? Like like, what does that process even look like? I'm sure you had rid Dozens of because even even myself, I was like, why is this guy not have ads on it? Like, I was just running the numbers. I was like, this guy could be making Bank. If you're just to throw the ball out, you

Scott Tolinski

know, like What what west? Bank. Like, huge. Oh, I know you said I was hoping you'd do it the same. Bank.

Wes Bos

Bank. Well, obviously, we've talked about why you didn't do that. But, like, what does it look like when you when they approached you? Yeah. I mean, all great questions and things that I didn't know and I still don't know, really.

Topic 57 46:27

Josh kept his personal domain

Guest 3

I the the the, In the case of the New York Times, they emailed me and were like, hey, do you wanna have we love we're playing the game.

Guest 3

Do you wanna have a discussion around it? And, As I mentioned, the New York Times games in word games in particular, you know, play an important part in the origin story of Wordle. So I was, like, very open to that conversation. There are some other gaming companies that reached out to me, or basically every big company reached out to me kind of. It's never, hey, we wanna buy your thing. It's like, would you be open to having a discussion about you know, it's very open ended, but I feel like I probably could've, there are other probably more lucrative, you know, companies, rid in terms of of the sale out there, but going with a company that was aligned with my values and I think will be good rid Stewards for the game was really, really important for me.

Guest 3

There are a bunch of steps in the deal making process that I did not know did not know existed, and I kind of, rid You know, kind of stumbled through them. Were I to do it again, I might, I might do some of them a bit Differently, or I think it's just one of those things you learn and it's kinda hard to to figure out. But there's like there's a point in the deal making where you kind of Sign something that's like, nonbinding, but kind of says, we're kinda getting serious about each other. We're not I'm not gonna look and solicit around and talk to talk to other people. And Okay.

Guest 3

The like the what steps you wanna take before then and after then kind of kind of I think it becomes clear to you when you go through this process, you know, when to when to go through those those things. I am very you may have gathered from the way I'm talking about this. I'm very not business Savvy. It doesn't excite me or inspire me. And so I know some people really enjoy that. But, yeah, for me, it was just like, rid You know, an unfortunate byproduct of the thing I had to do to to to go through this process. Oh, that that's interesting. I was curious of, like, what that looks like. Even

Topic 58 47:53

Redirecting between domains complex

Wes Bos

Even now, like, I've got some tiny little websites that get some decent traffic. And every now and then, you get somebody who's like, hey. Like, I'd like to buy this rid. Because it's got good traffic and the audiences overlaps and, like, you gotta have phone calls and NDAs and, like,

Guest 3

Like, most of the time it doesn't pan out and, like, what a pain in the butt. It's yeah. It takes time. And there are a bunch of questions that no one knows the answer to. Like, what is this thing worth? Right? Like, both Yeah. Each parties think may think they know, but then it's like a negotiation.

Scott Tolinski

Yeah. It's intense. It's intense. That sounds like, It sounds like, I don't know, inexciting, but, also, I'm I'm sure you're feeling relieved at this point. I feel like it is yeah. Yeah. I think that's The biggest sense for me right now is relief. Well, I will share a fun fact is,

Guest 3

as I mentioned before, this is a path on my personal domain, power Language.co.uk

Wes Bos

Yeah. Forward. Yeah. What's the plan there?

Guest 3

Which you if you're gonna make a viral game, don't put it on a custom domain. Yeah. Don't put it on a cart. So the agreement is that I'm gonna keep PowerLanguage .co.uk.

Guest 3

Wow. They are gonna have the path, which is a you know, it's a we we had to figure out how that was gonna work Because there's no way I can give them complete ownership of the path, you know, while I retain the domain. And they were very understanding that the The my portfolio site had, you know, value to me, and I wanted to keep it. But it is highly irregular, I would say. Wow. Oh, yeah. Yeah. You'll have to put a

Wes Bos

o whatever

Guest 3

redirect in there. Make sure you don't goof it up. Yeah. Yeah. Yeah. So thankfully, I think Cloudflare has, rid Like a page rule or like a redirect rule. Yeah. I can add Yeah. You could do that. But there there is as part of the migration. We're gonna add a bit of logic to make sure that people's, because as As we mentioned, it's stored in local storage.

Topic 59 50:08

Maintaining user data across domains

Guest 3

Something I learned through doing this project Oh, it's domain specific. Domain. So I didn't realize also dub dub dub And no dub dub dub count as different to games. And I'm not redirecting, so you can play. If you go to without the dub dub dub, It won't have your stats if you want to play in dub dub dub. Yeah. I you know, obviously, a redirect to make one of them the canonical URL would be the correct password.

Guest 3

I was so far in at that point. I didn't wanna handle a migration from 1 local storage to the other. There and there were a bunch of things you can do there, but yeah. Anyway Oh, yeah. Yeah. There's I specifically

Wes Bos

have had to do that in the past. What did you do? I ended up rid.

Topic 60 50:41

Wes suggests cross-domain communication

Wes Bos

So you set up a you set up something on the I've done it cross domain, but you have to set up, like, a self hub Hub that yeah. It's a iframe that sends it via

Guest 3

Do you like post message? Post message. Yeah. Yeah. You got to set up course So those websites are allowed to talk to each other, and you gotta sort of hot potato it from the one domain to another. Yeah. So you could definitely do that with the Yeah. Yeah. The the other option I was looking at which is way simpler but fraught in different ways was just like base 64 encoding the data because it's fairly consistent in size. And Then just doing a client side redirect, sending that data along as a URL per AM. The only issue there is, like, what if someone shares that URL. Right? Like, We think about URLs a lot because we're developers. But I think for a lot of users, they're not you know, one of the things that pains me about modern Web development actually is the, the lack of aesthetics in URLs. Mhmm. You know, people just throw anything up there. I'm I'm quite a purist. But anyway so, like, imagine if you have your stats In encoded in a URL, you give it to your dad or something like that. They go, and suddenly they have your stats. Oh, yeah. Yeah. Be a bit weird. Yeah. So there's just some, like, UX stuff. So The the method you mentioned, Wes, I think is definitely the cleanest one. It's just bit more technically involved and, like, depends depends what you have an appetite for. Yeah.

Wes Bos

Rid. Even like, like New York Times might have, some security in there.

Topic 61 52:01

Security policies may block cross-domain requests

Wes Bos

I I am forgetting all the names of everything right now, but, like, sometimes they have security policies on their content security policy. That's what it is. Or you can't request data from a domain. Right? So rid. You definitely have to to be in some meetings for that one. That's interesting.

Topic 62 52:22

Will NYT expand Wordle features?

Wes Bos

So what what is the New York Times? Are they gonna are they gonna Add more stuff to it. Is it gonna be, like I always thought, like, well, can can we have 6 letter words? Like, how come how come it's 5 letter words? You know? Not 5 minute abs, 4 minute abs. One of can I you're an innovator, Les?

Topic 63 52:39

Josh considered adding an archive

Guest 3

Can we have 6 minutes? They should be things. Oh, I gotta make it.

Guest 3

Rid Wordle 6. Yeah. I'm not quite sure. There are some, like, things I would have liked to have done that I never when it says start take taking off, it was like Pushing changes to a entirely client side website is a little forthright, but, like, I'm some people leave a tab open on their phones, or they have it installed My home screen in a kind of PWA fashion. Yeah. When those assets get refreshed, I don't actually know a lot of the time. You know? I can see that people are running like, I have, like, a hash Of the the JavaScript bundle Yeah. Embedded in the file, and I can see see that there are people playing old versions. So things like changing the word list That needs to be consistent is a little fraught because if I change the word list, and then it's different from people, that's problematic. And so that kind of slowed down some of those problems, which I'm sure I could've tackled If I had an appetite to just kinda slow down development. So it's things like maybe an archive of the last week's games. So if you miss some, you can go back. Or Oh, yeah. The the other thing that was getting a bit back end y was like the concept of a leaderboard with your friends. It's not a global one, But just like you could add your friends. And then there's a bunch of interesting stuff you can do where you could show when friends have completed for the day so you know who you can talk to about it. Or Yeah. Maybe or there's a winner's chat room. And once you win, you get put in a chat room with other people who know what the solution is so you can discuss. But these are all like what if, nice to haves, And I think add a level of complexity that maybe isn't No kidding. Worth it for what the game you know, the game is so successful as it is Alrighty. Yeah. Totally. It's all trade offs. The reason why it's so successful. What's your opener word? I try and mix it up each day. Oh, it depends if I'm feeling you're open.

Topic 64 54:22

Josh varies his first word each day

Guest 3

Yeah. If I'm feeling pretty, you know, overwhelmed, I'll go to one of the go to's. I rate high in irritation at the moment. But if I'm, like, Feeling carefree, and you know I've got appetite for a bit of a challenge. I'll, like, throw something out there. Love a pilot. That's quite a good idea. Pilot.

Guest 3

There is there are some pretty Pretty good crunchy 5 letter words out there.

Guest 3

What's your do you have an opener?

Wes Bos

I I was doing irate for the longest time, and then I I went on I found a TikTok that somebody downloaded the word list and Yeah. Did like a frequency analysis?

Scott Tolinski

Yeah. Yeah. And they said it was Oh my gosh. Shoot. What was it? I just I should not I should not get this deep into it. I I'm, like, music an opener? Hello or whatever. I Just write a word. Then maybe it's because I'm dyslexic that I I'm like, mean words are not great, so I'm just like It's so frustrating to me this whole game. I just like, I I don't know any words. Rid. Yeah. Later is apparently the statistically

Topic 65 55:17

Analysis of best statistical first words

Wes Bos

most your best one. But, like, I use it, and I suck at it. So

Guest 3

Is what so what's fascinating about the game is that I think it appeals to people on a bunch of different levels.

Guest 3

Language is a universal thing. Everyone has to use language. So at the base level, even if you're not thinking about Frequency algorithms. You can, like, play the game because you know which letters are likely to occur where, like, starting with an x, probably it's probably not gonna be a word starting with x. Like, everyone knows that.

Guest 3

What is interesting is that a bunch of technically minded people have really enjoyed digging into and writing algorithms. And they all come up with slightly different results Actually, because it is fairly subjective how you weight the different answers in different different spots. That's so fun. This is so neat.

Topic 66 55:42

Game appeals to different skill levels

Wes Bos

Yeah. That's really cool.

Guest 3

Rid Is there anything else, we didn't talk about that we should hit before we get into some sick pics? Yeah. There is one thing that I really wanted to mention, and that is the concept of juice. Are you familiar with juice in a in a UI? Juice in a UI. I'm familiar with juice in the the movie Juice with J PAL. The movie Juice. Yeah. So this is a little different. There is an excellent talk on YouTube, called Juice It or Lose It. And it's basically about and it's specific to games, but it applies to other UIs. And it's about how you give feedback to the player Cool. And how much the experience changes.

Topic 67 56:33

Importance of UI juice for engagement

Guest 3

And I knew about this stuff, But I never, really, yeah, I never really practiced it. So for instance, in Wordle, you enter a word on the keyboard, You hit enter. The computer immediately knows what what you letters you got right and what you got wrong. But when you play Wordle, what it does is The tiles flip over 1 by 1. Mhmm. That animation takes less than a second.

Guest 3

But I think it's a it's a really night it, like, visually, it's pleasing.

Guest 3

And it also, like, teases out you made a guess and the computer, like, slowly lets you know how you did. And I think a lot of developers when they'll write something like this, rid They will just have the UI snap, update, and reflect the state that the computer knows about. And and that's what I had done basically in everything I did previously. With Wordle, I took the time to, like, rid Work putting a little juice in there, this, like, flipping animation, and it makes the world of difference. And I was chatting to my friends about this, who's very experienced front end developer at Reddit. And his observation was that things in life, in the real world, don't happen instantaneously.

Guest 3

Like, nothing goes from 0 to 1 rid Immediately.

Guest 3

Yeah. Pop in and out. Yeah. It'd be very surreal. Yeah. And so, Bill, again, because like we talked about, it's humans that will be using your UI, Making your UI behave in a way that feels human, feels natural, feels organic Yeah. Just really helps People engage with it. And and that was something that I, like I said, I'd heard about, but I didn't really fully understand until I did it. And I think it's played a large part In Wordle's success, they're not anything it's very subtle, not anything amazing, but just like the little pop when the tile appears and that Flipping animation, I think, does so much. Yeah. I did notice that. It all feels very

Topic 68 57:36

Real-world changes aren't instantaneous

Wes Bos

nice and smooth and snappy. And like you said, it's very human

Topic 69 58:13

Animations make Wordle feel responsive

Guest 3

In the in the UI interactions. And is that is that all just like CSS animations then? Yeah. Yeah. CSS. And I I experimented, you know, like, with the The concept of, like, state machines with animations.

Guest 3

I experimented with using data attributes to, like, Indicate what state an element should be, and then use the CSS selectors, which like targeted based on the attributes.

Guest 3

Or at least I did that In one place in the code. I'm pretty sure I probably did it in another ways, another another way in the code. But yeah. Yeah. All using CSS. It's fairly simple.

Scott Tolinski

And it was, yeah, it was really fun to do. And, web components, Shadow DOM encapsulation, amazing for stuff like this. Didn't have to worry about leaking of anything like that. Oh, interesting. Wow. Yeah. Go back and listen. We I think we did an episode on web components wise. Maybe I'll I'll I'll do a quick hunt for that and put in the show notes if rid. If you're interested in learning a little bit more about those, there's a lot of really neat things in the web component space that is constantly evolving considering how how still ready. Alright.

Topic 70 58:48

CSS animations add juice

Wes Bos

Let's move into the next section of the podcast, which is sick picks. This is a section where we pick things that are sick.

Topic 71 59:14

Hosts transition to picks section

Guest 3

I'm not sure. Did you come prepared with a sick pick or not? I do, but it's a little irregular. But I think you'll I think you'll appreciate it. We love a regular. Yeah. We love a regular. Yeah. Okay. So my sick Pick. This is partially inspired by Wes's Instagram, which is amazing. If you haven't if you his stories are all, like, Just doing dad stuff. Just doing dad stuff. Yeah. Yeah. And then not doing dad stuff. But anyway, it is Tupperware.

Topic 72 59:47

Josh picks identical Tupperware containers

Guest 3

My it's a life hack for Tupperware.

Guest 3

Oh, okay.

Guest 3

I buy the same piece of Tupperware. Multiples of exactly the same piece of Tupperware.

Guest 3

And that means you are never trying to match a lid to a base because they're all identical. It no longer matters.

Guest 3

And that is my,

Wes Bos

rid Sick pick. Oh, man. I I often tell my wife how, like, the it I'm not one one for government, but if there's anything The government should standardize its Tupperware and socks. Tupperware and socks? Too many too many too many different Kinds of oh, man. I totally agree. My my problem is that we standardize on new Tupperware, like, twice every 2 years. So and then you end up with, like, Random pieces. What so what do you use then? Yeah. Yeah. You you IKEA IKEA

Guest 3

makes one that's been fairly consistent, and so I just buy that's the one I buy. It's glass, rid. High quality.

Scott Tolinski

Yeah. Really, really does the job. The same with the the Costco, whatever the Costco glass one is. We've we've standardized on that, but I I definitely agree.

Scott Tolinski

I'm gonna go irregular with my sick pick as well then since, we have Tupperware as number 1.

Scott Tolinski

My my sick pick is going to be a giant tub of Epsom salt. Rid. I found out that you can buy a 1 gallon tub of Epsom salt on Amazon for $27, and it's huge. It's a massive tub of some salt. And, you know, I love taking an Epsom salt bath, getting nice and nice and warm and and cozy in there. So, yeah, this is a giant tub. The one I got Is Epsom salt plus eucalyptus because you gotta love eucalyptus as a scent, and, it's huge. It's a gallon. It's a big old tub. Rid. So a tub of Epsom salt, that's my sick pick. I'm gonna,

Topic 73 01:00:51

Scott picks giant tub of Epsom salt

Wes Bos

sick pick a I I sick picked the instant pot air fryer lid, and I told you that The only downside was it was too small.

Topic 74 01:01:29

Wes picks Instant Pot air fryer

Wes Bos

So we got the instant vortex plus 6 in 1, and This thing is freaking awesome. Like, I was I was so skeptical on air fryers, and we finally got into it. And, like, we use it, Like, probably every day, I would say, and just for some part of our meal. And it's it's amazing for making vegetables and chicken. And, Of course. Like, I always thought I was like, oh, yeah. You're just eating chicken fingers every day. Like, that's why people like air fryers, but it's it's so much better than that. So rid. Check out the instant vortex plus.

Wes Bos

That's the one we landed on. I went through the America's Test Kitchen, and they tested, like, a 100 of them, and they said this is the best one. And I trust everything they say. They're like wire cutter for kitchen gadgets.

Scott Tolinski

Sick. Alright. Shameless plugs.

Scott Tolinski

Josh, do you have anything to plug? Power language.co.ukforward/wordle.

Topic 75 01:02:16

Scott plugs Level Up Tutorials

Scott Tolinski

Perfect. Yes. Check it out if you haven't heard about it. Yeah. Honestly, if you have not worked, as a developer, I mean, this is such a a cool experiment or or just a cool thing to even just Try and feel like, oh, yeah. This is the kind of stuff that we can do. You have so much freedom in the world to build something like this, and all you gotta do is just try it. Who cares? Go for it. Rid. Love it. I'm going to shamelessly plug leveluptutorials.com.

Scott Tolinski

We have a new course out this month on Keystone, and it's on Keystone in itself. It's from a b Amy Dutton who, who is Awesome.

Scott Tolinski

Her her her style, her personality, Her whole vibe is infectious.

Scott Tolinski

She's super cool.

Scott Tolinski

She's a great instructor, and she's just exciting to listen to and to watch. So if you wanna learn rid. Estone j s. Head on over to level up tutorials.com.

Scott Tolinski

You can sign up to become a pro and get access to a new course every month, or you can just straight up buy it outright. So check it out. Thank you. I'm gonna

Topic 76 01:03:15

Wes plugs his courses

Wes Bos

shamelessly plug all my courses, west boss.comforward/courses.

Wes Bos

You can learn all you need to learn about JavaScript And it's HTML and CSS there. Westboss.comforward/courses.

Wes Bos

A bunch of free ones there as well.

Wes Bos

Alright. Thank you, Josh, So much for coming on. Yeah. That was super interesting. I'm very curious. I bet that this is going to be one of our most highly like, my whole family is like, I need to listen to that podcast, so it'd be kind of interesting to see how many people do listen to this one.

Topic 77 01:03:29

Hosts thank guest and end show

Wes Bos

Amazing. If you are new to this podcast, make sure you subscribe in your podcast player. Rid And, thanks again. Thank you. Peace. Peace.

Scott Tolinski

Head on over to syntax.fm for a full archive of all of our shows, rid. And don't forget to subscribe in your podcast player or drop a review if you like this show.

Share