Codewars (and other code golfs) are a great way to become more familiar with a language when you're already handy with programming. In this video, I showcase https://codewars.com, my favorite code golf site. To demonstrate how it works, I solve the "Tic-Tac-Toe Checker" Kata. PUBLICATION PERMISSIONS:
Original video was published with the Creative Commons Attribution license (reuse allowed). Link: https://www.youtube.com/watch?v=6nKLt9tjUpY https://www.youtube.com/watch?v=21EEGdNIkkI
Appropriate animations are a great way to help users build an accurate mental model of how a web page UI works and therefore increase usability of a web site. But it's important for a UI to feel polished and fluid to users. Shipping in Chrome is a collection of new APIs that help you build these frictionless and engaging experiences. Get a highlight of some of these new APIs: view transitions, scroll-driven animations, the linear easing function, and individual transform properties. PUBLICATION PERMISSIONS:
Original video was published with the Creative Commons Attribution license (reuse allowed). Link: https://www.youtube.com/watch?v=oDcb3fvtETs https://www.youtube.com/watch?v=XKRLt3UPbmU
For a few years we have been talking about "Full stack type safety".
But to be honest the developer experience has not been great, especially for beginners. The setup has simply been too complex. Until now with TRPC! 🎉 The T3 stack will setup a boilerplate that integrates TRPC with fully typed React query and mutation hooks. And optionally Prisma which can handle types and CRUD at the database layer. Good times! 🌈 In this Full stack tutorial i build a complete authenticated todo list app. I bootstrap the application with the T3 stack boilerplate. Then I set up email magic link authentication with next-auth. I create all the TRPC backend routes to create, read, update and delete todos. I implement the corresponding functionality on the frontend side using the TRPC query and mutation hooks and add some tailwind styling. Lastly I ensure a really snappy user experience by adding optimistic updates to the frontend. Happy watching! If you want to code along here is a start branch: https://github.com/danba340/full-stack-t3-tutorial/tree/start And the finished code:
https://github.com/danba340/full-stack-t3-tutorial Twitter: https://twitter.com/BarelyDaniel
Github: https://github.com/danba340
Instagram: https://www.instagram.com/barelycoding
TikTok: https://www.tiktok.com/@barelycoding
LinkedIn: https://www.linkedin.com/in/daniel-bark Timestamps
0:00 Intro
0:56 T3 Boilerplate
2:10 Overview
3:30 Prisma Database Setup
8:30 next-auth Email Magiclink
13:07 Backend TRPC Router
23:27 Frontend Login
26:07 Frontend TRPC Querying
35:24 Frontend TRPC Mutations
47:18 Frontend Optimistic updates
1:00:19 Final touches
1:02:36 TRPC thoughts CREDITS:
Please subscribe to Daniel's YouTube channel at: https://www.youtube.com/@danielbark https://www.youtube.com/watch?v=bkIxJrSrIsE