- 186
- 19 936
Dinghy Studio
Germany
Приєднався 23 кві 2020
Our Dinghy Studio channel contains a collection of short form video updates about UX, Interaction, Design and Web Development.
S2E6: Implementing Route Protection in Next.js
Summary
In this episode, Nils and Judith continue their journey in coding a virtual bookshelf using Next.js and SuperBase. They discuss the challenges of tech debt, the importance of simplicity in coding, and the process of creating a new page for book entries. The conversation also covers implementing route protection, designing a book creation form, and exploring the ShadCN UI library for better component design. The duo emphasizes the significance of clean code and user-friendly interfaces throughout their development process. In this conversation, Nils and Judith delve into the intricacies of developing a book management application using Next.js. They explore various components such as text areas, server actions, and form validation, while also discussing the challenges they face in implementing these features. The dialogue highlights their collaborative approach to problem-solving and the importance of understanding both client and server components in modern web development.
Chapters
00:00 Introduction to the Virtual Bookshelf Project
01:49 Understanding Tech Debt and Simplicity in Coding
03:34 Creating a New Page for Book Entries
05:39 Implementing Route Protection in Next.js
12:31 Designing the Book Creation Form
16:39 Exploring ShadCN for UI Components
21:42 Finalizing the Book Form Structure
24:07 Exploring Text Areas in Development
26:05 Implementing Server Actions in Next.js
27:52 Understanding Server and Client Components
29:30 Creating Book Actions and Services
31:43 Handling Book Creation Logic
34:14 Integrating Form Data and Validation
38:30 Installing and Using Zod for Validation
44:06 Reflections on Development Challenges
About the author
---
Hi, I'm Nils, Co-Founder and Head of Interaction Design at Dinghy. With over 10 years of experience in designing and building websites, I'm passionate about creating great digital experiences. At Dinghy, we believe that exceptional UX comes from the synergy of branding, content strategy, design, and development, all working together seamlessly.
On this channel, I show you how to create outstanding user experiences for your customers through hands-on, easy-to-follow how-tos in wireframing, UI design, stakeholder management, usability testing, HTML, CSS, and frontend development.
Keywords
---
user experience, digital products, customer satisfaction, business profitability, user testing, research, product market fit, development costs, customer lifetime value, app store ratings, marketing spend, conversion rates, employee efficiency, product features, ux, design, usability, test, persona, css, product development
In this episode, Nils and Judith continue their journey in coding a virtual bookshelf using Next.js and SuperBase. They discuss the challenges of tech debt, the importance of simplicity in coding, and the process of creating a new page for book entries. The conversation also covers implementing route protection, designing a book creation form, and exploring the ShadCN UI library for better component design. The duo emphasizes the significance of clean code and user-friendly interfaces throughout their development process. In this conversation, Nils and Judith delve into the intricacies of developing a book management application using Next.js. They explore various components such as text areas, server actions, and form validation, while also discussing the challenges they face in implementing these features. The dialogue highlights their collaborative approach to problem-solving and the importance of understanding both client and server components in modern web development.
Chapters
00:00 Introduction to the Virtual Bookshelf Project
01:49 Understanding Tech Debt and Simplicity in Coding
03:34 Creating a New Page for Book Entries
05:39 Implementing Route Protection in Next.js
12:31 Designing the Book Creation Form
16:39 Exploring ShadCN for UI Components
21:42 Finalizing the Book Form Structure
24:07 Exploring Text Areas in Development
26:05 Implementing Server Actions in Next.js
27:52 Understanding Server and Client Components
29:30 Creating Book Actions and Services
31:43 Handling Book Creation Logic
34:14 Integrating Form Data and Validation
38:30 Installing and Using Zod for Validation
44:06 Reflections on Development Challenges
About the author
---
Hi, I'm Nils, Co-Founder and Head of Interaction Design at Dinghy. With over 10 years of experience in designing and building websites, I'm passionate about creating great digital experiences. At Dinghy, we believe that exceptional UX comes from the synergy of branding, content strategy, design, and development, all working together seamlessly.
On this channel, I show you how to create outstanding user experiences for your customers through hands-on, easy-to-follow how-tos in wireframing, UI design, stakeholder management, usability testing, HTML, CSS, and frontend development.
Keywords
---
user experience, digital products, customer satisfaction, business profitability, user testing, research, product market fit, development costs, customer lifetime value, app store ratings, marketing spend, conversion rates, employee efficiency, product features, ux, design, usability, test, persona, css, product development
Переглядів: 89
Відео
EP24: The Evolution of User-Centric Design
Переглядів 5612 годин тому
Summary In this conversation, Nils discusses the evolving landscape of user experience design, emphasizing the importance of ethical considerations, user safety, and the integration of AI technologies. He reflects on successful projects and the significance of UX audits in enhancing digital products. Looking ahead, he highlights the need for compliance with emerging regulations and the blending...
S2E5: The Power of Custom Types in Programming
Переглядів 11019 годин тому
Summary In this episode, Nils and Judith continue their coding journey, focusing on refining their application using Superbase and TypeScript. They discuss the challenges faced with auto-generated types and the decision to define their own interfaces. The conversation delves into the importance of code structure, handling data transformations between snake case and camel case, and implementing ...
How to optimize SVGs and implement them into a website
Переглядів 25День тому
In this conversation, Nils discusses the process of optimizing SVG graphics for web use, focusing on exporting from Figma, addressing common issues like background blur and gradient borders, and enhancing SVGs with animations. He emphasizes the importance of proper naming conventions in Figma, the limitations of CSS compared to SVG, and the need for final adjustments to ensure the graphics rend...
S2E4: The journey from From to Next.js w/Judith
Переглядів 7014 днів тому
S2E4: The journey from From to Next.js w/Judith
EP22: Building MVPs That Work w/Daniel Becker
Переглядів 5914 днів тому
EP22: Building MVPs That Work w/Daniel Becker
S2E3: Migrating Data and Enhancing UI Components
Переглядів 3021 день тому
S2E3: Migrating Data and Enhancing UI Components
EP21: Developing an MVP - why is it so important?
Переглядів 1921 день тому
EP21: Developing an MVP - why is it so important?
S2E2: Creating a Database for Our Bookshelf
Переглядів 177Місяць тому
S2E2: Creating a Database for Our Bookshelf
EP20: Bridging Communication Gaps in UX w/Daniel Becker
Переглядів 24Місяць тому
EP20: Bridging Communication Gaps in UX w/Daniel Becker
S2E1: A New Chapter with Supabase and Vercel w/ Judith Böhlert
Переглядів 205Місяць тому
S2E1: A New Chapter with Supabase and Vercel w/ Judith Böhlert
EP23: The AI Revolution Where Innovation Meets User Intent w/Rob Phillips
Переглядів 46Місяць тому
EP23: The AI Revolution Where Innovation Meets User Intent w/Rob Phillips
EP19: The Business Impact of Good Content Management
Переглядів 31Місяць тому
EP19: The Business Impact of Good Content Management
EP18: The Power of Video Content in Marketing w/Jan Heinemeyer
Переглядів 47Місяць тому
EP18: The Power of Video Content in Marketing w/Jan Heinemeyer
Adding Hand-Drawn Markup to Text with HTML and CSS
Переглядів 1052 місяці тому
Adding Hand-Drawn Markup to Text with HTML and CSS
EP17: Communication as a Catalyst for UX Innovation
Переглядів 132 місяці тому
EP17: Communication as a Catalyst for UX Innovation
How to hand off a responsive design like a PRO?
Переглядів 452 місяці тому
How to hand off a responsive design like a PRO?
EP16: Simplifying Digital Transformation for Business Growth
Переглядів 242 місяці тому
EP16: Simplifying Digital Transformation for Business Growth
EP15: How do we make personas better at Dinghy w/Nosipho Nwigbo
Переглядів 202 місяці тому
EP15: How do we make personas better at Dinghy w/Nosipho Nwigbo
EP14: Let's talk about User Personas w/Nosipho Nwigbo
Переглядів 442 місяці тому
EP14: Let's talk about User Personas w/Nosipho Nwigbo
Testimonial Florian Zeitler from PAZE Studios for implementing the responsive website design
Переглядів 153 місяці тому
Testimonial Florian Zeitler from PAZE Studios for implementing the responsive website design
Ep13: Unlocking the Business Impact of UX Design
Переглядів 203 місяці тому
Ep13: Unlocking the Business Impact of UX Design
EP12: A real-life example of integrated UX Design
Переглядів 113 місяці тому
EP12: A real-life example of integrated UX Design
EP11: Secrets to Seamless UX in Agile Teams
Переглядів 203 місяці тому
EP11: Secrets to Seamless UX in Agile Teams
EP10: UX Research & Testing - The Dinghy Way w/Nosipho Nwigbo
Переглядів 253 місяці тому
EP10: UX Research & Testing - The Dinghy Way w/Nosipho Nwigbo
EP11: Live-Coding a Fullstack Prototype: UI Improvements, Star Ratings, and Future Plans
Переглядів 403 місяці тому
EP11: Live-Coding a Fullstack Prototype: UI Improvements, Star Ratings, and Future Plans
EP10: Live-Coding a Fullstack Prototype: Optimizing Performance with Different Approaches
Переглядів 1444 місяці тому
EP10: Live-Coding a Fullstack Prototype: Optimizing Performance with Different Approaches
EP09: Designing for International Markets w/ Sylvia
Переглядів 174 місяці тому
EP09: Designing for International Markets w/ Sylvia
EP09: Live-Coding a Fullstack Prototype: Streamlining Book Cards
Переглядів 144 місяці тому
EP09: Live-Coding a Fullstack Prototype: Streamlining Book Cards
EP08: Live-Coding a Fullstack Prototype: Enhancing User Engagement with Star Ratings
Переглядів 494 місяці тому
EP08: Live-Coding a Fullstack Prototype: Enhancing User Engagement with Star Ratings
Care to give an example? Or you just mean the computer is doing things for you while you focus on something else?
The supabase client offers a way to rename the columns when returning the data. The select method accepts a parameter for the columns. If you use the format customName:columnName, the data will have the custom name. So an alternative to the DTO.
Really? Oh wow thanks we will check that one out!
Even after a day of „nothing worked on my end“ I find your uploads very relaxing. 😊 Thank you two for sharing! Your clips give me vibes of „See? Dev Experience can be bright and fun and giving some love to the project.“ Also: what‘s your VSCode color theme? It looks very nice and still readable.
Hi there! Thank you so much for the love! 🫶 I'm glad we can help brighter your day! My VSCode theme is this one: marketplace.visualstudio.com/items?itemName=mvllow.rose-pine (Using Cascadia Code as the font btw)
Thanks for these walk throughs! :) I've looked everywhere and can't find out how to have my website pages at the root nav level in Studio's structure. It looks like you found a way. What's the secret?
Oh yeah that's a bit of a head scratcher. What we do is this in the `deskStructure.ts`: ``` S.list() .title('Content') .items([ S.listItem() .title('Homepage') .icon(HomeIcon) .child( S.document() .schemaType('homepage') .documentId('homepage-page-builder') .views([...singletonDocumentNode(S)]) ), … ]) ``` So basically manually adding one specific document, with a specific Id to the desk. Does that help?
@@dinghystudio Yes, I appreciate it! Out of all the content on Sanity, including their own, I've found yours the most helpful when first starting out. :)
@@DerekHarris-d4x oh thank you, that's so nice to hear! We'll make sure to keep going then :)
Good watch, thanks!
Glad you liked it!
Hey. The createClient function is used to get data from Sanity into the frontend. From what I can tell, that's where you're adding the env variables right now. This means your 'preview' environment website will correctly display the drafts. However, how does Sanity itself know that you are in the previewDrafts perspective to show the "preview" option. Wouldn't that require setting some environment variables/config in the Sanity code? Are you running a production AND a preview version of the Sanity Studio itself? Also, I'm assuming you are hosting the Sanity Studio on Vercel and not using Sanity's default hosting. Maybe that's what's causing the confusion for me.
Hey! Thank you for reaching out 👌. You’re totally right, the trick for us is deploy the site twice (on Vercel) and set different env vars. So we have a special domain which we know has the preview mode enabled. That’s where we work on content and check code updates too. It’s basically just our staging branch deployment with a domain assigned.. I’d like to add that sanity studio itself does not know of the preview mode.. that’s only on the frontend.
It's funny cause I know all of the words that you used, but I can't for the life of me understand what the hell you're on about.
That’s fair! This short might indeed not capture the whole point I’m trying to make :) I think the complete video does a better job. If not please let me know, I’m always trying to learn and get better.
Easy ? How ?? I'm struggling !!! :(
Heeey! Let’s fix that! Where are you stuck right now?
Thank you so much for this episode, you have no idea how much this interview helped me. I was given the assignment to plan the design team's expansion based on the international rollout of our product and had no idea how to start. This is just invaluable information ♥
So sorry for just getting back to you now! Thank you so much for this comment! ❤️ Glad to hear that it helped you and I wish you all the best with that project.
Does this still work right now? I don't see the "Editor" or "Preview" tabs when opening a document.
It does yeah, we’re not a special version of sanity. To see the preview tab you need to install the iFrame pane plugin from sanity. Then the editor button will show up as well, so you can flip between the two. The last bit is to load the appropriate page into that iFrame pane and you’re done!
Just like desiging a dress takes consideration of the silhouette & material as well as the colors, patterns, etc. T For the design of any kind of media or online platform, the formating and organization of assets matters just as much as the color grading & logo shape.
Love your records 😊
Thank youuuu!
Very interesting! I enjoyed watching the Video a lot
Thanks!
Gay af 🤢🤮
Какая мерзкая хуйня попадается периодически в рекомендациях 😂😂😂
Love your video! Just what I was looking for.
Glad it was helpful!
Hey, this could be a stupid question, but what's the browser you're using? 8:51 Seen a lot of folks use that recently.
No stupid questions! It’s called Arc :)
Would be great to see more of the technical implementation - can this work with frameworks other than next.js?
Hi Steve, sure it can! Because this is actually SvelteKit. Since the drafts feature is inside of Sanity this method can work with anything.
Excited to learn so much from this project!!
More to come!
Hey mate whats your vscode theme setup?
Hey Luke! It's this one right here: marketplace.visualstudio.com/items?itemName=mvllow.rose-pine It has a dark version too :)
Promo-SM 🤷
Hi Jone, what do you mean by that?
Lovely solution to the problem. I will definitely have to look into subgrid more and how I can make use of this feature in the future :)
Glad it was helpful!