COMPRESSEDfm

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 Episode 182, hosts James and Amy delve into the intricacies of React Server Components (RSCs) and the challenges of building multi-step forms. They discuss the latest developments in RSCs, including the implementation in RedwoodJS, and share insights on managing state and validations in multi-step forms. Throughout, the hosts offer practical advice and technical deep dives, making complex topics accessible and engaging.

Sponsors

Postman

Postman is an API platform for building and using APIs. Postman simplifies each step of the API lifecycle and streamlines collaboration so you can create better APIs—faster.

Attend their upcoming conference, April 30 - May 1, 2024 in San Francisco. Amy and James will be there in person.

Show Notes

00:00:00 Intro

00:00:40 Sponsored by Postman

00:02:07 React Server Components

00:03:12 Deep dive into RSC and Redwood JS implementation details

00:04:23 Explanation of React Server Components ecosystem and challenges

• Theo's YouTube Video: The Truth About React Server Components
• Ben Holmes and Dan Abramov Stream: Dan Abramov explores React Server Components with us!
• Episode 71: Secret Things, Env Vars, How to Handle API Keys Correctly

00:36:03 Transition to multi-step forms and their complexities

00:37:05 Strategies for handling form state and validation

00:45:28 Detailed considerations for different form steps and data handling

00:55:49 Picks and Plugs

• Amy's Pick: Full House on Hulu and HBO Max, Fuller House on Netflix
• Amy's Plug: Two Week Build
• James's Pick: Baking Sheet, Mat, and Cooling Rack Set
• James's Plug: Learn, Build, Teach Discord
• The Happiness Lab Podcast: Episode - Where Everybody Knows Your Name

James and Adrian content creation, from starting YouTube channels to building communities. Adrian highlights the secrets he’s learned in building a private community and some of the bleeding edge technology that he’s excited about.

Show Notes

[00:00:00] Introduction

[00:01:20] Content creation and community building.

[00:05:09] Image generation in AI.

[00:08:09] AI models evolving in design.

[00:12:13] Low-code, no-code tools.

[00:16:03] Website building efficiency with Wix.

• Wix

[00:20:32] Discord community interactions.

• Merge Web Dev

[00:21:34] AI creating a teams of AIs.

[00:26:18] AI converting photos into 3D.

• YouTube video on Gaussian Splatting

[00:29:20] Creating 3D Models from Photos.

• Luma AI

[00:32:26] AI art and no code.

• Codex Community
• Adrian Twarog YouTube Channel

Brad and Amy dive into their year-end tech reflections, discussing goal-setting strategies and Amy's ambitious Build 12 project for 2025. The hosts explore various database hosting solutions, share their favorite hardware purchases including cameras and peripherals, and examine how AI tools are reshaping development workflows. The episode concludes with insights into emerging tech trends and anticipated developments for 2025.

Chapter Marks

00:00 Episode introduction and host intros

00:41 Year-end goals discussion and 12-week planning

02:02 Amy's Build 12 project announcement

03:01 Goal setting strategies and focus

04:25 Brad's 2024 goals review

05:35 Travel plans and New York City trips

06:58 More 2024 goals: fitness, career, and finances

08:21 Technical stack discussion

13:22 AI tools and development workflows

17:19 Database hosting options comparison

25:45 Tech gear and hardware updates

33:47 Notable tech purchases review

43:29 AI tools and future tech discussion

Links

• Build Twelve, by Brian P. Moran - Amy's upcoming project
• The 12 Week Year (book)
• Atomic Habits, by James Clear (book)
• The Power of Habit, by Charles Duhigg (book)
• Supabase
• Neon database
• Digital Ocean
• Turso
• Cursor IDE
• Remarkable Tablet (v2)
• Oura Ring
• Razer Basilisk V3 Pro mouse
• Swish app for Mac
• Nuphy Air 75 keyboard
• Drop keyboard
• Insta360 One camera
• Insta360 Go 3 camera
• Nikon ZFC camera
• Ray Deck - Episode 182: Low-Code as a Medium For High-Speed Developers
• Marc Lou
• Pieter Levels
• WorkOS
• The Best Way to Add Authentication to Your Astro Website (Amy’s YouTube Video)
• Comparing Frameworks - Amy's project
• GitHub Copilot
• Claude
• convertkit.com
• loops.so
• Prisma

In this episode, our guest, Brittney Postma talks about the Developer Experience (DX) and how it important it is to the work that we do and the frameworks that use.

Sponsors

daily.dev

daily.dev is where developers grow together. It provides a community-based feed of the best developer news, helping you stay up-to-date. daily.dev aggregates hundreds of sources every few minutes and creates a personal feed for you according to your interests, whether it’s web dev, data science, or Elixir. Anything you might be interested in, it has the content for you.

Check out daily.dev

Hashnode

Creating a developer blog is crucial in creating an online presence for yourself. It’s proof of work for your future employer. Hashnode makes it easy to start a blog in seconds on your custom domain for free. It’s fully optimized for developers and supports writing in Markdown, rich embeds, publishing from GitHub repository, syntax highlighting, and edge caching with Next.js blogs deployed on Vercel. On top of these, Hashnode is free from paywall, ads, and sign-up prompts.

Hashnode is a community of developers, engineers, and people in tech. Your article gets instant readership from their growing community.

Check out Hashnode, and join the community.

Show Notes

• 0:00 Introduction
• 1:34 Introducing Brittney Postma
  • Grainger
  • codingcat.dev
  • SvelteSirens
• 2:10 Quick Rants, Hot Takes, and Parenting Tips
• 6:22 Developer Experience
  • Sarah Drasner on the Developer Experience
• 10:21 Sponsor: Hashnode
• 11:10 Developer Experience through Documentation
• 13:34 Tools around the Developer Experience
• 16:54 The Developer Experience when Working on Client Projects
  • Episode 5: Starting a New Project
• 21:18 Developer Experience with Education
• 22:36 Sponsor: Daily.dev - http://daily.dev
• 23:36 Developer Experience when Onboarding
• 28:23 Things to Take into Account when Creating Content
• 33:50 What Advice do you have a Student that's Trying to make Career Choices?
  • Episode 43: New Beginnings for New Developers
  • Episode 35: Crossover Episode with Brittney and Alex
  • Freecodecamp.com
• 35:38 My Vanilla JavaScript is alight and not great, my company wants me to work with Vue JS already. They say I'll learn JavaScript also in a good way while working with the framework right away. What do you guys think?
  • Beginner JavaScript
  • Wes Bos's Courses
• 38:46 Is the dev industry saturated?
• 41:57 Closing Thoughts