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