84 | Building a SvelteKit Wordle Clone
09/19/22 • 55 min
In this episode, James talks about his experience using SvelteKit to re-create the famous guessing game, Wordle.
Sponsors
ZEAL
ZEAL is a computer software agency that delivers “the world’s most zealous” and custom solutions. The company plans and develops web and mobile applications that consistently help clients draw in customers, foster engagement, scale technologies, and ensure delivery.
ZEAL believes that a business is “only as strong as” its team and cares about culture, values, a transparent process, leveling up, giving back, and providing excellent equipment. The company has staffers distributed throughout the United States, and as it continues to grow, ZEAL looks for collaborative, object-oriented, and organized individuals to apply for open roles.
For more information visit codingzeal.com
Vercel
Vercel combines the best developer experience with an obsessive focus on end-user performance. Their platform enables frontend teams to do their best work. It is the best place to deploy any frontend app. Start by deploying with zero configuration to their global edge network. Scale dynamically to millions of pages without breaking a sweat.
For more information, visit Vercel.com
DatoCMS
DatoCMS is a complete and performant headless CMS built to offer the best developer experience and user-friendliness in the market. It features a rich, CDN-powered GraphQL API (with realtime updates!), a super-flexible way to handle dynamic layouts and structured content, and best-in-class image/video support, with progressive/LQIP image loading out-of-the-box."
For more information, visit datocms.com
Show Notes
- 00:00:00 - Intro
- 00:03:57 - Svelte vs SvelteKit and Wordle
- 00:10:29 - Sponsor: Vercel
- 00:11:36 - How Wordle Works
- 00:15:51 - SvelteKit Stores for Game State
- 00:19:01 - Sponsor: Zeal
- 00:19:53 - More on Game State
- 00:21:33 - Working with LocalStorage
- 00:27:43 - Creating the Keyboard
- 00:29:53- Game Logic for Guessing Letter
- 00:31:12 - Sponsor: DatoCMS
- 00:32:05 - Color-coded Feedback On Guesses
- 00:36:46 - Adding Transitions on Guessed Letters
- 00:38:19 - Custom Overlay and Alert Components
- 00:47:17 - Grab Bag Questions
- 00:50:20 - Picks and Plugs
Links
- Source Code - https://github.com/jamesqquick/sveltekit-wordle-clone
- Wordle Game - https://www.nytimes.com/games/wordle/index.html
- (Amy Plug) Advent of CSS - https://adventofcss.com/
- (Amy Plug #2) Advent of JS - https://adventofcss.com/
- (James Pick) - https://www.amazon.com/Wireless-Charging-Case-Compatible-Microphones/dp/B09C1G9Z1D
- (James Plug) - https://www.youtube.com/c/jamesqquick
In this episode, James talks about his experience using SvelteKit to re-create the famous guessing game, Wordle.
Sponsors
ZEAL
ZEAL is a computer software agency that delivers “the world’s most zealous” and custom solutions. The company plans and develops web and mobile applications that consistently help clients draw in customers, foster engagement, scale technologies, and ensure delivery.
ZEAL believes that a business is “only as strong as” its team and cares about culture, values, a transparent process, leveling up, giving back, and providing excellent equipment. The company has staffers distributed throughout the United States, and as it continues to grow, ZEAL looks for collaborative, object-oriented, and organized individuals to apply for open roles.
For more information visit codingzeal.com
Vercel
Vercel combines the best developer experience with an obsessive focus on end-user performance. Their platform enables frontend teams to do their best work. It is the best place to deploy any frontend app. Start by deploying with zero configuration to their global edge network. Scale dynamically to millions of pages without breaking a sweat.
For more information, visit Vercel.com
DatoCMS
DatoCMS is a complete and performant headless CMS built to offer the best developer experience and user-friendliness in the market. It features a rich, CDN-powered GraphQL API (with realtime updates!), a super-flexible way to handle dynamic layouts and structured content, and best-in-class image/video support, with progressive/LQIP image loading out-of-the-box."
For more information, visit datocms.com
Show Notes
- 00:00:00 - Intro
- 00:03:57 - Svelte vs SvelteKit and Wordle
- 00:10:29 - Sponsor: Vercel
- 00:11:36 - How Wordle Works
- 00:15:51 - SvelteKit Stores for Game State
- 00:19:01 - Sponsor: Zeal
- 00:19:53 - More on Game State
- 00:21:33 - Working with LocalStorage
- 00:27:43 - Creating the Keyboard
- 00:29:53- Game Logic for Guessing Letter
- 00:31:12 - Sponsor: DatoCMS
- 00:32:05 - Color-coded Feedback On Guesses
- 00:36:46 - Adding Transitions on Guessed Letters
- 00:38:19 - Custom Overlay and Alert Components
- 00:47:17 - Grab Bag Questions
- 00:50:20 - Picks and Plugs
Links
- Source Code - https://github.com/jamesqquick/sveltekit-wordle-clone
- Wordle Game - https://www.nytimes.com/games/wordle/index.html
- (Amy Plug) Advent of CSS - https://adventofcss.com/
- (Amy Plug #2) Advent of JS - https://adventofcss.com/
- (James Pick) - https://www.amazon.com/Wireless-Charging-Case-Compatible-Microphones/dp/B09C1G9Z1D
- (James Plug) - https://www.youtube.com/c/jamesqquick
Previous Episode
83 | An Introduction to Github Actions
In this episode, Amy and James explain Github Actions: what they are, how they work, use cases, and more. Amy also shares some of her personal experience in setting up Github Actions in a recent project.
Sponsors
ZEAL
ZEAL is a computer software agency that delivers “the world’s most zealous” and custom solutions. The company plans and develops web and mobile applications that consistently help clients draw in customers, foster engagement, scale technologies, and ensure delivery.
ZEAL believes that a business is “only as strong as” its team and cares about culture, values, a transparent process, leveling up, giving back, and providing excellent equipment. The company has staffers distributed throughout the United States, and as it continues to grow, ZEAL looks for collaborative, object-oriented, and organized individuals to apply for open roles.
For more information visit codingzeal.com
Vercel
Vercel combines the best developer experience with an obsessive focus on end-user performance. Their platform enables frontend teams to do their best work. It is the best place to deploy any frontend app. Start by deploying with zero configuration to their global edge network. Scale dynamically to millions of pages without breaking a sweat.
For more information, visit Vercel.com
DatoCMS
DatoCMS is a complete and performant headless CMS built to offer the best developer experience and user-friendliness in the market. It features a rich, CDN-powered GraphQL API (with realtime updates!), a super-flexible way to handle dynamic layouts and structured content, and best-in-class image/video support, with progressive/LQIP image loading out-of-the-box."
For more information, visit datocms.com
Show Notes
- 00:00:00 - Intro
- 00:05:27 - What are GitHub actions?
- 00:12:59 - Sponsor: DatoCMS
- 00:13:53 - Linting or Formatting
- 00:24:34 - Sponsor: Vercel
- 00:30:03 - Sponsor: Zeal
- 00:30:56 - Other Use Cases
- 00:37:12 - Grab Bag Questions
- 00:44:00 - Picks and Plugs
Links
- Learn Github Actions - https://docs.github.com/en/actions/learn-github-actions
- Quickstart for Github Actions - https://docs.github.com/en/actions/quickstart
- Level Up Tutorials Course on Github Actions from Brian Douglass - https://leveluptutorials.com/tutorials/code-automation-with-github/introduction
- (James Pick) Rode Wireless Go - https://www.amazon.com/Rode-Microphones-Wireless-Channel-Microphone/dp/B08XFQ6KP9
- (James Plug) YouTube Channel - https://www.youtube.com/c/jamesqquick
- (Amy Pick) ELOH IPhone Game - https://apps.apple.com/us/app/eloh/id1406382064
- (Amy Plug) Learn Build Teach Discord - https://learnbuildteach.com/
Next Episode
85 | Casual Conversations on Github Copilot, Frameworks, Desk Setups, Serverless, and More
In this episode, James and Amy answer questions from the audience about Github Copilot, modern frameworks, Serverless vs Express.js, PlanetScale vs Supabase vs Firebase, and more!
Sponsors
ZEAL
ZEAL is a computer software agency that delivers “the world’s most zealous” and custom solutions. The company plans and develops web and mobile applications that consistently help clients draw in customers, foster engagement, scale technologies, and ensure delivery.
ZEAL believes that a business is “only as strong as” its team and cares about culture, values, a transparent process, leveling up, giving back, and providing excellent equipment. The company has staffers distributed throughout the United States, and as it continues to grow, ZEAL looks for collaborative, object-oriented, and organized individuals to apply for open roles.
For more information visit codingzeal.com
Vercel
Vercel combines the best developer experience with an obsessive focus on end-user performance. Their platform enables frontend teams to do their best work. It is the best place to deploy any frontend app. Start by deploying with zero configuration to their global edge network. Scale dynamically to millions of pages without breaking a sweat.
For more information, visit Vercel.com
DatoCMS
DatoCMS is a complete and performant headless CMS built to offer the best developer experience and user-friendliness in the market. It features a rich, CDN-powered GraphQL API (with realtime updates!), a super-flexible way to handle dynamic layouts and structured content, and best-in-class image/video support, with progressive/LQIP image loading out-of-the-box."
For more information, visit datocms.com
Show Notes
- 00:00:00 - Intro
- 00:02:16 - Github Copilot Controversy
- 00:15:08 - Sponsor: DatoCMS
- 00:16:02 - Thoughts on Next JS,Redwood, Remix, and More
- 00:23:27 - Sponsor: ZEAL
- 00:24:22 - Desk Cable Management
- 00:30:25 - Serverless vs Express.js
- 00:34:50 - Prisma and PlanetScale
- 00:37:17 - Sponsor: Vercel
- 00:38:24 - Script for YouTube Images
- 00:39:42 - PlanetScale vs Firebase vs Supabase
If you like this episode you’ll love
UI Breakfast: UI/UX Design and Product Strategy
Design Better
CodeWinds - Leading edge web developer news and training | javascript / React.js / Node.js / HTML5 / web development - Jeff Barczewski
UI Narrative: UX, UI, IxD, Design and Research
Joomla Beat Podcast | Web design, development, online marketing, social media & website management
Episode Comments
Generate a badge
Get a badge for your website that links back to this episode
<a href="https://goodpods.com/podcasts/compressedfm-218466/84-building-a-sveltekit-wordle-clone-24741231"> <img src="https://storage.googleapis.com/goodpods-images-bucket/badges/generic-badge-1.svg" alt="listen to 84 | building a sveltekit wordle clone on goodpods" style="width: 225px" /> </a>
Copy