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.
- Podcast intro
- Wes introduces himself and Scott
- Wes tries to introduce Wordle and its creator Josh Wardle
- Wes provides background on Wordle's popularity
- Wes introduces guest Josh Wardle, creator of Wordle
- Josh Wardle introduces himself
- Josh discusses how Wordle went viral through sharing on social media
- Discussion of Wordle's popularity in New Zealand
- Josh outlines Wordle's growth timeline
- Josh sold Wordle to the New York Times
- Josh reveals Wordle has over 10 million daily players
- Reaction to Wordle's massive growth
- Josh discusses his background in art and product management
- Josh worked at Reddit when it was still small
- Josh discusses Reddit April Fools projects
- Value of understanding tech details as product manager
- Josh transitioned into software engineering
- Frameworks hide complexity of web development
- Benefits of learning web fundamentals before frameworks
- Most developers use tools built by others
- Browser APIs vs third party libraries
- Focusing on end goal vs understanding details
- Wordle uses vanilla JS and web components
- Overview of web components
- Wes notices Wordle's custom HTML elements
- Keyboard is its own web component
- Josh used low-level web component APIs
- Scott asks about Josh's experience with web components
- Josh would consider a wrapper library next time
- Learning fundamentals was valuable
- Wordle frontend is only 250KB
- Josh built Wordle with Rollup
- Most of bundle is word list and Lodash merge
- Wes suggests smaller Lodash merge alternative
- No backend aided viral spread
- Optimizations for going viral
- Low hosting costs despite huge traffic
- Anecdote about email cost per letter
- Local storage used for stats and streaks
- No logins or accounts
- Keeping it simple aligned with Josh's goals
- Monetization would introduce complexity
- Josh wasn't trying to build a business
- Example of Wordle copycats motivated NYT sale
- Scott suggests encrypting word list
- Josh explains encryption algorithm
- Wes accidentally discovered upcoming words
- Josh randomized full word list
- Josh plays Wordle daily without knowing words
- Discussion of occasional problematic words
- Analysis of moist as a word
- How does Josh create viral hits?
- Josh focuses on serving humans
- Intuition versus calculated decisions
- Authenticity enables viral hits
- NYT approached Josh about Wordle
- Coping with copycats was draining
- Monetization wasn't a priority
- Deal process was complicated
- Josh isn't business-oriented
- Authenticity enabled viral success
- Wes jokes about invoicing NYT
- Wes introduces sponsor FreshBooks
- Josh kept his personal domain
- Redirecting between domains complex
- Maintaining user data across domains
- Wes suggests cross-domain communication
- Security policies may block cross-domain requests
- Will NYT expand Wordle features?
- Josh considered adding an archive
- Josh slowed feature development
- Josh varies his first word each day
- Analysis of best statistical first words
- Game appeals to different skill levels
- Importance of UI juice for engagement
- Real-world changes aren't instantaneous
- Animations make Wordle feel responsive
- CSS animations add juice
- Hosts transition to picks section
- Josh picks identical Tupperware containers
- Scott picks giant tub of Epsom salt
- Wes picks Instant Pot air fryer
- Scott plugs Level Up Tutorials
- Wes plugs his courses
- Hosts thank guest and end show
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.
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.
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.
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.
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
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.
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.
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.
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
Reaction to Wordle's massive growth
Guest 3
that. Yeah. So my background is actually in art.
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.
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.
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?
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.
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,
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.
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.
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.
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
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.
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.
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,
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.
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.
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
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.
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,
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.
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.
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.
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
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.
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.
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.
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.
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.
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.
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.
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,
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.
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.
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.
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.
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.
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.
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.
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
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.
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.
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?
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.
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.
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
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.
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.
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.
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.
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
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.
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.
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.
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.
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?
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.
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
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.
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.
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
Real-world changes aren't instantaneous
Wes Bos
nice and smooth and snappy. And like you said, it's very human
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.
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.
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.
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,
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.
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.
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
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.
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.