Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Zpravodajství

Technologické zprávy

Technika

Creator of Wordle - Josh Wardle

Syntax - Tasty Web Development Treats

Full Stack Developers Wes Bos and Scott Tolinski dive deep into web development topics, explaining how they work and talking about their own experiences. They cover from JavaScript frameworks like React, to the latest advancements in CSS to simplifying web tooling.

<p>In this episode of Syntax, Wes and Scott talk with the creator of Wordle, Josh Wardle. What's the tech stack for Wordle? Does he care about the clones of Wordle? And how did selling Wordle work?</p> <h2 id="sentry---sponsor" class="code-line" data-line="9">Sentry - Sponsor</h2> <p class="code-line" data-line="11">If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting <a title="https://sentry.io" href= "https://sentry.io/" data-href= "https://sentry.io">Sentry.io</a> and using the coupon code TASTYTREAT during sign up.</p> <h2 id="sanity---sponsor" class="code-line" data-line="13">Sanity - Sponsor</h2> <p class="code-line" data-line="15">Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at <a title="https://www.sanity.io/create" href= "https://www.sanity.io/create" data-href= "https://www.sanity.io/create">sanity.io/create</a>. Get an awesome supercharged free developer plan on <a title= "https://www.sanity.io/syntax" href="https://www.sanity.io/syntax" data-href="https://www.sanity.io/syntax">sanity.io/syntax</a>.</p> <h2 id="freshbooks---sponsor" class="code-line" data-line="17"> Freshbooks - Sponsor</h2> <p class="code-line" data-line="19">Get a 30 day free trial of Freshbooks at <a title="https://freshbooks.com/syntax" href= "https://freshbooks.com/syntax" data-href= "https://freshbooks.com/syntax">freshbooks.com/syntax</a>.</p> <h2 id="show-notes" class="code-line" data-line="27">Show Notes</h2> <ul class="code-line" data-line="29"> <li class="code-line" data-line="29"><strong><a title="#t=00:27:02" href= "https://file+.vscode-resource.vscode-webview.net/Users/ichris/Documents/GitHub/Syntax/shows/430%20-%20Creator%20of%20Wordle.md#t=00:27:02" data-href="#t=00:27:02">00:27:02</a></strong> Guest introduction</li> <li class="code-line" data-line="30"><a title= "https://www.powerlanguage.co.uk/wordle/" href= "https://www.powerlanguage.co.uk/wordle/" data-href= "https://www.powerlanguage.co.uk/wordle/">Wordle</a></li> <li class="code-line" data-line="31"><strong><a title="#t=02:45:13" href= "https://file+.vscode-resource.vscode-webview.net/Users/ichris/Documents/GitHub/Syntax/shows/430%20-%20Creator%20of%20Wordle.md#t=02:45:13" data-href="#t=02:45:13">02:45:13</a></strong> How did Wordle go viral initially?</li> <li class="code-line" data-line="32"><strong><a title="#t=05:27:14" href= "https://file+.vscode-resource.vscode-webview.net/Users/ichris/Documents/GitHub/Syntax/shows/430%20-%20Creator%20of%20Wordle.md#t=05:27:14" data-href="#t=05:27:14">05:27:14</a></strong> Where did the idea for Wordle come from?</li> <li class="code-line" data-line="33"><strong><a title="#t=07:07:06" href= "https://file+.vscode-resource.vscode-webview.net/Users/ichris/Documents/GitHub/Syntax/shows/430%20-%20Creator%20of%20Wordle.md#t=07:07:06" data-href="#t=07:07:06">07:07:06</a></strong> What's your background?</li> <li class="code-line" data-line="34"><a title= "https://www.reddit.com" href="https://www.reddit.com/" data-href= "https://www.reddit.com">Reddit.com</a></li> <li class="code-line" data-line="35"><strong><a title="#t=12:52:23" href= "https://file+.vscode-resource.vscode-webview.net/Users/ichris/Documents/GitHub/Syntax/shows/430%20-%20Creator%20of%20Wordle.md#t=12:52:23" data-href="#t=12:52:23">12:52:23</a></strong> Writing just HTML CSS and JavaScript</li> <li class="code-line" data-line="36"><strong><a title="#t=15:58:24" href= "https://file+.vscode-resource.vscode-webview.net/Users/ichris/Documents/GitHub/Syntax/shows/430%20-%20Creator%20of%20Wordle.md#t=15:58:24" data-href="#t=15:58:24">15:58:24</a></strong> Wordle has 2 external dependancies</li> <li class="code-line" data-line="37"><strong><a title="#t=16:41:06" href= "https://file+.vscode-resource.vscode-webview.net/Users/ichris/Documents/GitHub/Syntax/shows/430%20-%20Creator%20of%20Wordle.md#t=16:41:06" data-href="#t=16:41:06">16:41:06</a></strong> Sponsor: Sentry</li> <li class="code-line" data-line="38"><strong><a title="#t=17:40:23" href= "https://file+.vscode-resource.vscode-webview.net/Users/ichris/Documents/GitHub/Syntax/shows/430%20-%20Creator%20of%20Wordle.md#t=17:40:23" data-href="#t=17:40:23">17:40:23</a></strong> The tech stack of Wordle</li> <li class="code-line" data-line="39"><a title="https://lit.dev" href="https://lit.dev/" data-href="https://lit.dev">Lit Elements</a></li> <li class="code-line" data-line="40"><a title= "https://www.npmjs.com/package/just-merge" href= "https://www.npmjs.com/package/just-merge" data-href= "https://www.npmjs.com/package/just-merge">just-merge</a></li> <li class="code-line" data-line="41"><a title= "https://www.gnu.org/software/gzip/" href= "https://www.gnu.org/software/gzip/" data-href= "https://www.gnu.org/software/gzip/">gzip</a></li> <li class="code-line" data-line="42"><a title= "https://www.cloudflare.com/" href="https://www.cloudflare.com/" data-href="https://www.cloudflare.com/">Cloudflare</a></li> <li class="code-line" data-line="43"><a title= "https://aws.amazon.com/s3/" href="https://aws.amazon.com/s3/" data-href="https://aws.amazon.com/s3/">AWS S3</a></li> <li class="code-line" data-line="44"><strong><a title="#t=22:21:04" href= "https://file+.vscode-resource.vscode-webview.net/Users/ichris/Documents/GitHub/Syntax/shows/430%20-%20Creator%20of%20Wordle.md#t=22:21:04" data-href="#t=22:21:04">22:21:04</a></strong> Would you use web components again?</li> <li class="code-line" data-line="45"><strong><a title="#t=29:36:08" href= "https://file+.vscode-resource.vscode-webview.net/Users/ichris/Documents/GitHub/Syntax/shows/430%20-%20Creator%20of%20Wordle.md#t=29:36:08" data-href="#t=29:36:08">29:36:08</a></strong> How much did hosting cost?</li> <li class="code-line" data-line="46"><strong><a title="#t=29:55:01" href= "https://file+.vscode-resource.vscode-webview.net/Users/ichris/Documents/GitHub/Syntax/shows/430%20-%20Creator%20of%20Wordle.md#t=29:55:01" data-href="#t=29:55:01">29:55:01</a></strong> How does Wordle remember my streak?</li> <li class="code-line" data-line="47"><strong><a title="#t=33:56:07" href= "https://file+.vscode-resource.vscode-webview.net/Users/ichris/Documents/GitHub/Syntax/shows/430%20-%20Creator%20of%20Wordle.md#t=33:56:07" data-href="#t=33:56:07">33:56:07</a></strong> Do you play Wordle everyday?</li> <li class="code-line" data-line="48"><strong><a title="#t=36:28:11" href= "https://file+.vscode-resource.vscode-webview.net/Users/ichris/Documents/GitHub/Syntax/shows/430%20-%20Creator%20of%20Wordle.md#t=36:28:11" data-href="#t=36:28:11">36:28:11</a></strong> Sponsor: Sanity</li> <li class="code-line" data-line="49"><strong><a title="#t=37:16:07" href= "https://file+.vscode-resource.vscode-webview.net/Users/ichris/Documents/GitHub/Syntax/shows/430%20-%20Creator%20of%20Wordle.md#t=37:16:07" data-href="#t=37:16:07">37:16:07</a></strong> How do you land on internet hits so often?</li> <li class="code-line" data-line="50"><strong><a title="#t=40:33:15" href= "https://file+.vscode-resource.vscode-webview.net/Users/ichris/Documents/GitHub/Syntax/shows/430%20-%20Creator%20of%20Wordle.md#t=40:33:15" data-href="#t=40:33:15">40:33:15</a></strong> Are you aware of the clones?</li> <li class="code-line" data-line="51"><a title= "https://gordle.herokuapp.com" href="https://gordle.herokuapp.com/" data-href="https://gordle.herokuapp.com">Gordle</a></li> <li class="code-line" data-line="52"><strong><a title="#t=44:33:15" href= "https://file+.vscode-resource.vscode-webview.net/Users/ichris/Documents/GitHub/Syntax/shows/430%20-%20Creator%20of%20Wordle.md#t=44:33:15" data-href="#t=44:33:15">44:33:15</a></strong> Sponsor: Freshbooks</li> <li class="code-line" data-line="53"><strong><a title="#t=45:17:10" href= "https://file+.vscode-resource.vscode-webview.net/Users/ichris/Documents/GitHub/Syntax/shows/430%20-%20Creator%20of%20Wordle.md#t=45:17:10" data-href="#t=45:17:10">45:17:10</a></strong> Selling Wordle to the New York Times</li> <li class="code-line" data-line="54"><strong><a title="#t=49:05:20" href= "https://file+.vscode-resource.vscode-webview.net/Users/ichris/Documents/GitHub/Syntax/shows/430%20-%20Creator%20of%20Wordle.md#t=49:05:20" data-href="#t=49:05:20">49:05:20</a></strong> Dealing with the domain name</li> <li class="code-line" data-line="55"><strong><a title="#t=54:15:09" href= "https://file+.vscode-resource.vscode-webview.net/Users/ichris/Documents/GitHub/Syntax/shows/430%20-%20Creator%20of%20Wordle.md#t=54:15:09" data-href="#t=54:15:09">54:15:09</a></strong> What's his opener word?</li> <li class="code-line" data-line="56"><strong><a title="#t=56:03:03" href= "https://file+.vscode-resource.vscode-webview.net/Users/ichris/Documents/GitHub/Syntax/shows/430%20-%20Creator%20of%20Wordle.md#t=56:03:03" data-href="#t=56:03:03">56:03:03</a></strong> Juice</li> <li class="code-line" data-line="57"><a title= "https://www.youtube.com/watch?v=Fy0aCDmgnxg" href= "https://www.youtube.com/watch?v=Fy0aCDmgnxg" data-href= "https://www.youtube.com/watch?v=Fy0aCDmgnxg">Juice it or Lose it talk</a></li> <li class="code-line" data-line="58"><strong><a title="#t=59:10:06" href= "https://file+.vscode-resource.vscode-webview.net/Users/ichris/Documents/GitHub/Syntax/shows/430%20-%20Creator%20of%20Wordle.md#t=59:10:06" data-href="#t=59:10:06">59:10:06</a></strong> Sick Picks!</li> </ul> <h2 id= "%C3%97%C3%97%C3%97-siiiiick-%C3%97%C3%97%C3%97-piiiicks-%C3%97%C3%97%C3%97" class="code-line" data-line="60">××× SIIIIICK ××× PIIIICKS ×××</h2> <ul class="code-line" data-line="62"> <li class="code-line" data-line="62">Josh: Tupperware</li> <li class="code-line" data-line="63">Scott: <a title= "https://amzn.to/3GmkAmt" href="https://amzn.to/3GmkAmt" data-href= "https://amzn.to/3GmkAmt">Giant tub of Epsom Salt</a></li> <li class="code-line" data-line="64">Wes:</li> </ul> <h2 id="shameless-plugs" class="code-line" data-line="66">Shameless Plugs</h2> <ul class="code-line" data-line="68"> <li class="code-line" data-line="68">Josh: <a title= "https://www.powerlanguage.co.uk/wordle/" href= "https://www.powerlanguage.co.uk/wordle/" data-href= "https://www.powerlanguage.co.uk/wordle/">Wordle</a></li> <li class="code-line" data-line="69">Scott: <a title= "https://leveluptutorials.com/tutorials/keystone-js" href= "https://leveluptutorials.com/tutorials/keystone-js" data-href= "https://leveluptutorials.com/tutorials/keystone-js">KeystoneJS Course</a></li> <li class="code-line" data-line="70">Wes: <a title= "https://wesbos.com/courses/" href="https://wesbos.com/courses/" data-href="https://wesbos.com/courses/">All Courses</a></li> </ul> <h2 id="tweet-us-your-tasty-treats" class="code-line" data-line= "72">Tweet us your tasty treats</h2> <ul class="code-line" data-line="74"> <li class="code-line" data-line="74"><a title= "https://www.instagram.com/stolinski/" href= "https://www.instagram.com/stolinski/" data-href= "https://www.instagram.com/stolinski/">Scott's Instagram</a></li> <li class="code-line" data-line="75"><a title= "https://www.instagram.com/LevelUpTutorials/" href= "https://www.instagram.com/LevelUpTutorials/" data-href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a></li> <li class="code-line" data-line="76"><a title= "https://www.instagram.com/wesbos/" href= "https://www.instagram.com/wesbos/" data-href= "https://www.instagram.com/wesbos/">Wes' Instagram</a></li> <li class="code-line" data-line="77"><a title= "https://twitter.com/wesbos" href="https://twitter.com/wesbos" data-href="https://twitter.com/wesbos">Wes' Twitter</a></li> <li class="code-line" data-line="78"><a title= "https://www.facebook.com/wesbos.developer" href= "https://www.facebook.com/wesbos.developer" data-href= "https://www.facebook.com/wesbos.developer">Wes' Facebook</a></li> <li class="code-line" data-line="79"><a title= "https://twitter.com/stolinski" href= "https://twitter.com/stolinski" data-href= "https://twitter.com/stolinski">Scott's Twitter</a></li> <li class="code-line" data-line="80">Make sure to include <a title="https://twitter.com/SyntaxFM" href= "https://twitter.com/SyntaxFM" data-href= "https://twitter.com/SyntaxFM">@SyntaxFM</a> in your tweets</li> </ul>

In this episode of Syntax, Wes and Scott talk with the creator of Wordle, Josh Wardle. What's the tech stack for Wordle? Does he care about the clones of Wordle? And how did selling Wordle work?
 Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
 Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.
 Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax.
 Show Notes 
00:27:02 Guest introduction
 Wordle

02:45:13 How did Wordle go viral initially?

05:27:14 Where did the idea for Wordle come from?

07:07:06 What's your background?
 Reddit.com

12:52:23 Writing just HTML CSS and JavaScript

15:58:24 Wordle has 2 external dependancies

16:41:06 Sponsor: Sentry

17:40:23 The tech stack of Wordle
 Lit Elements
 just-merge
 gzip
 Cloudflare
 AWS S3

22:21:04 Would you use web components again?

29:36:08 How much did hosting cost?

29:55:01 How does Wordle remember my streak?

33:56:07 Do you play Wordle everyday?

36:28:11 Sponsor: Sanity

37:16:07 How do you land on internet hits so often?

40:33:15 Are you aware of the clones?
 Gordle

44:33:15 Sponsor: Freshbooks

45:17:10 Selling Wordle to the New York Times

49:05:20 Dealing with the domain name

54:15:09 What's his opener word?

56:03:03 Juice
 Juice it or Lose it talk

59:10:06 Sick Picks!
 ××× SIIIIICK ××× PIIIICKS ××× Josh: Tupperware
 Scott: Giant tub of Epsom Salt

 Wes:
 Shameless Plugs Josh: Wordle

 Scott: KeystoneJS Course

 Wes: All Courses

 Tweet us your tasty treats Scott's Instagram
 LevelUpTutorials Instagram
 Wes' Instagram
 Wes' Twitter
 Wes' Facebook
 Scott's Twitter
 Make sure to include @SyntaxFM in your tweets

Aplikace Youradio Talk

Creator of Wordle - Josh Wardle

Poslechněte si podcast