- Видео 58
- Просмотров 85 832
I Code It
Австралия
Добавлен 29 авг 2022
Hi, I'm Juntao.
I help people write better code. I'm a software developer, an author and a creator.
I have worked on web backend and frontend development with rich experience in engineering practices like Test-Driven Development and Clean Code for over a decade, although I've been focusing more on front-end development in recent years.
I'm also enthusiastic about sharing my leanings of projects with the community online and offline. I've already published many books related to Web development, and the most recent three are Test-Driven Development with React (2021), React Clean Code (2022) and 3 Web Designs in 3 Weeks(2022).
I help people write better code. I'm a software developer, an author and a creator.
I have worked on web backend and frontend development with rich experience in engineering practices like Test-Driven Development and Clean Code for over a decade, although I've been focusing more on front-end development in recent years.
I'm also enthusiastic about sharing my leanings of projects with the community online and offline. I've already published many books related to Web development, and the most recent three are Test-Driven Development with React (2021), React Clean Code (2022) and 3 Web Designs in 3 Weeks(2022).
React Clean Code - Simplify Complex UI with Headless Components Pattern
In this walk-through, we tackle a common issue with reusable UI components: an overgrown template selector that’s become difficult to manage, maintain, and customize. Originally built to be generic, this component has evolved into a complex structure weighed down by customizations. Watch as I refactor it using the headless component pattern with React Context.
By moving all logic into a central, UI-free context and breaking out visual elements-like Tiles, Categories, and Search Bars-into reusable atomic components, we unlock a flexible solution that’s easy to adapt. Whether building from scratch or using the default setup, this approach brings simplicity, power, and ultimate composability...
By moving all logic into a central, UI-free context and breaking out visual elements-like Tiles, Categories, and Search Bars-into reusable atomic components, we unlock a flexible solution that’s easy to adapt. Whether building from scratch or using the default setup, this approach brings simplicity, power, and ultimate composability...
Просмотров: 625
Видео
Enhance user experience with Pragmatic drag-and-drop in React: Monitoring all drag-and-drop events
Просмотров 8172 месяца назад
In the third installment of our drag-and-drop series, we delve into the crucial aspect of monitoring drag-and-drop interactions within your React applications. Monitoring these interactions ensures a responsive and intuitive user experience, giving you the ability to track and react to drag events as they unfold. We’ll start by reviewing what we’ve implemented so far, then explore how to visual...
Enhance user experience with Pragmatic drag-and-drop in React: Introduce Drop Operation
Просмотров 7803 месяца назад
In this continuation of our drag-and-drop series, we shift our focus to the drop operation, an essential part of creating a seamless drag-and-drop experience in React applications. We start by reviewing what we've accomplished so far, then dive into setting up drop targets with `dropTargetForElements`, handling drop events, and effectively passing data from the source to the target. By the end ...
Enhance user experience with Pragmatic drag-and-drop in React: Introduce Draggable API
Просмотров 1,5 тыс.3 месяца назад
In this video, we dive into the fundamentals of drag-and-drop interactions within React applications, using the Pragmatic Drag-and-Drop (pdnd) library. We'll start by building a simple board application and explore key features like draggable components, handling drag events, and managing states. Learn how to create a custom drag preview UI to improve user experience. Timeline: - 01:26 - Introd...
React Clean Code - Implementing Headless Components for Flexibility and Reusability
Просмотров 5443 месяца назад
Join me in this episode as we delve into the Headless Component pattern in React (www.martinfowler.com/articles/headless-component.html). We'll explore its benefits and see how it can help create more flexible and reusable components. This video walks you through a real-world example, showcasing different implementations to solve the same problem efficiently. Table of Contents: 01:17 - The Head...
Codemod Crash Course: Automate Refactoring with jscodeshift
Просмотров 5344 месяца назад
In this video, we explore how to use jscodeshift for automated code transformations, following a Test-Driven Development (TDD) approach. We start with an introduction to codemods and then dive into writing and testing transformations with jscodeshift. We also cover Abstract Syntax Trees (ASTs) and the AST Explorer tool. By the end of this video, you'll know how to use the jscodeshift CLI to app...
Understanding Abstract Syntax Trees with ASTExplorer
Просмотров 3524 месяца назад
In this video, we dive into the basics of Abstract Syntax Trees (ASTs) and how they can be incredibly useful in understanding and transforming your code. We’ll start with simple examples like variable declarations and arrow function declarations, using ASTExplorer.net to visualize and dissect these structures. This is the first video in a series where we'll also explore codemods and jscodeshift...
React Clean Code - Advanced Context Menu Refactoring with ACL
Просмотров 4924 месяца назад
Join me in this episode as we explore how to refactor a context menu component in React using clean code principles. This time, we'll enhance our approach with the Anti-Corruption Layer (ACL) pattern. We'll take backend data, reformat it, and generate menu items efficiently. This video demonstrates the power of the collection pipeline technique, the ACL pattern. Table of Contents: 00:00 - Intro...
React Clean Code - Refactoring a User Dashboard with Composition
Просмотров 7065 месяцев назад
In this video, we explore the concept of composition and how it can help you write cleaner, more maintainable code in React. Composition is a fundamental principle in React that allows you to build complex UIs from small, reusable components. Join me as I guide you through the process of refactoring a User Dashboard component to use composition. We'll break down the original, monolithic compone...
React Clean Code - Refactoring a Request Type Builder with Dependency Inversion Principle
Просмотров 5075 месяцев назад
In this video, we dive into the Dependency Inversion Principle (DIP) and how it can help you write cleaner, more maintainable code in React. The Dependency Inversion Principle is one of the five SOLID principles of object-oriented design, and it focuses on reversing the direction of dependency in a way that high-level modules do not depend on low-level modules. Instead, both should depend on ab...
React Clean Code - Refactoring a Context Menu with Collection Pipeline
Просмотров 4815 месяцев назад
Join me in this episode as we explore how to refactor a context menu component in React using clean code principles. We'll take backend data, reformat it, and generate menu items efficiently. This video demonstrates the power of the collection pipeline technique and the importance of a test-driven development (TDD) approach. Table of Contents: 02:50 - The main content starts 07:01 - Understand ...
Top Five Tips for Code Interviews for Frontend Developers
Просмотров 3088 месяцев назад
Join me in exploring essential tips for navigating frontend developer code interviews with my latest video, 'Top 5 Tips for Code Interviews for Frontend Developers.' This video isn't just about coding-it delves into the broader skills and habits that can make a difference in your interview outcomes. I share insights on good coding practices, such as using keyboard shortcuts and command lines, t...
Enhancing Data-Fetching with React Suspense and Error Boundaries
Просмотров 6059 месяцев назад
Unveil the power of React Suspense and SWR in data fetching with our latest tutorial! This quick, insightful video guide demonstrates how to leverage React's Suspense feature and SWR's suspense mode to create more declarative and readable code in your React applications. leanpub.com/react-data-fetching-patterns/c/icodeit (50% off) Key Highlights: Learn how to effectively implement Suspense and ...
Build a Tailwind CSS Shimmering Skeleton: Live Coding Session
Просмотров 67410 месяцев назад
We will build a skeleton loader using Tailwind CSS, as part of our data fetching tutorial series. We'll start with an introduction to skeleton screens, showcasing their role in improving user experience during data loading. Then, we'll dive into setting up a project with Vite and Tailwind CSS, and step by step, create a shimmering skeleton loader. Highlights include: - Grasp the role of skeleto...
Exploring Lazy Loading: Native Import vs React Suspense with Practical Demos
Просмотров 33710 месяцев назад
Join me in this detailed walkthrough of lazy loading techniques in modern web development. In this video, we'll compare two different approaches: using native import in a framework-agnostic setup, and implementing lazy loading with React's Suspense feature, alongside the Parcel bundler. 🔍 Inside This Video: A clear explanation of lazy loading and its significance in frontend development. A prac...
Quick Chrome Tip: Stub Network Requests with Chrome’s Network Overrides
Просмотров 325Год назад
Quick Chrome Tip: Stub Network Requests with Chrome’s Network Overrides
Evolving Your React App Safely with Feature Toggles and Branch By Abstraction
Просмотров 915Год назад
Evolving Your React App Safely with Feature Toggles and Branch By Abstraction
How Tasking Leads to Simple, Maintainable React Code
Просмотров 364Год назад
How Tasking Leads to Simple, Maintainable React Code
Explore the Power of ChatGPT's Code Interpreter in 10 minutes!
Просмотров 677Год назад
Explore the Power of ChatGPT's Code Interpreter in 10 minutes!
How to prepare your Frontend System Design Interview
Просмотров 29 тыс.Год назад
How to prepare your Frontend System Design Interview
Automate Your Workflow: Learn GitHub Actions in 10 Minutes!
Просмотров 1 тыс.Год назад
Automate Your Workflow: Learn GitHub Actions in 10 Minutes!
Demystifying Continuous Integration and Delivery in 10 minutes
Просмотров 166Год назад
Demystifying Continuous Integration and Delivery in 10 minutes
Master Build Scripts in 10 Minutes: A Quick Guide for React Developers
Просмотров 838Год назад
Master Build Scripts in 10 Minutes: A Quick Guide for React Developers
A Beginner's Guide to Cypress Testing Framework with a Weather Application | React
Просмотров 290Год назад
A Beginner's Guide to Cypress Testing Framework with a Weather Application | React
Apply Separation of Command and Query Principle (CQRS) in React Application
Просмотров 625Год назад
Apply Separation of Command and Query Principle (CQRS) in React Application
Think in Interfaces, Not Implementation: Using React Context API for Better Code Design
Просмотров 472Год назад
Think in Interfaces, Not Implementation: Using React Context API for Better Code Design
How ChatGPT Helped Me Build a Shortcuts App in Record Time
Просмотров 389Год назад
How ChatGPT Helped Me Build a Shortcuts App in Record Time
The evolution of a React application - 5 architecture styles you need to know
Просмотров 1,7 тыс.Год назад
The evolution of a React application - 5 architecture styles you need to know
Clean Code vs. Performance Code: Which One Should You Choose?
Просмотров 2,3 тыс.Год назад
Clean Code vs. Performance Code: Which One Should You Choose?
My Productivity Shell Settings | oh-my-zsh, auto-suggestions and more
Просмотров 433Год назад
My Productivity Shell Settings | oh-my-zsh, auto-suggestions and more
Amazing serie. Thank you so much!
Can you share the repository?
github.com/abruzzi/pdnd-demo
Awesome work! If guy could make a detailed step-by-step 1<>2hr tutorial on this that would really help newbies like me. :)
Thanks for the comment Sunit Joshi, I'll see what example I can use to make a longer version with more details 😄
3:04 what is Alex's video? do you have a link?
Sorry, should have said it more clearly, I'm referring the author of the pdnd Alex Rearadon. The video can be found here: ruclips.net/video/5SQkOyzZLHM/видео.html
Awsome content !!
Thanks, do let me know if you need more specific related topics.
Thank you for your video, I get to know more about how to separate the topics 🎉
Thanks for this great turtorial You should add a github link in description
Thanks this helped a lot, but think you should have use Edge (top / bottom) so you can rearange the list
Hi @sweLogan, thanks for the comment. If I'm reordering by calling a backend API, do I still need the edge?
Hi! your explanation is too good. can you make a video for react virtualized(grid) with PND . it would be great then
Hi Akash, thanks for the feedback. I'll have a look at the grid and virtualiser.
Dude... The music is to much.
Thanks for letting me know, I have get rid of them since I got some feedback.
Thank you for this tutorial, would love to see a repo to play with
Sorry I forgot to post it, you can find the code here: github.com/abruzzi/pdnd-demo
Is there a repo for this example ?
Thanks mate. So does that means Suspense should always pair up with Error Boundaries as Suspense will not handle errors.
Yeah, that's the idea. Suspense handles data fetching and when it failed to do so it throws. It's up to you to handle the error, you could ignore it in cases (like send analysis data to backend and you don't care the response).
Thank you for this awesome videos 👏👏,
This is great! Do you think there would be an easy way to use this library to make a nested drag and drop container? For example so you could have nested to-do's within a todo? I've tried personally but im struggling to get a placeholder for it.
I know there is like tree support if that would help you :)
Yeah the nested structure is well supported, there is an example here actually: codesandbox.io/s/386kzf?module=/example.tsx (from the Atlassian Design System document)
@@icodeit.juntao great thanks i'll have a look
Watching this after one whole year😂this is still relevant and helpful 👍 nice diagram
Thanks mate
Hi juntao, you videos are amazing, I am not sure if I can watch it with filtering with your image, looks like your image is cutting some contents for me, Thank you
Thanks for raising it here, I will check if I have the original file as I just recently did some clean up (it's very easy to run out of space when you make videos). Which part are you particularly looking for? - if I can find the original file I'll edit and republish the video.
Thank you :D
Thanks man
Thanks for your prqctical contents, please create some contents about handling global state management through services
Noted, I think I just have an example about that.
❤nice
thank you so much !
Thanks for sharing this principle, my man. Keep it up!😊
Using JS for such a task is not a good idea. I mean, TS will be a better option, since the data structures are well known, and making mistakes is very easy without a type system
Thanks!
Nice video, I always wanted to try the codemod, this video spark my curiosity and I think I'll use it for my migration, thanks for sharing 🙌
Your channel is criminally under-subscribed. This is fantastic content.
Thank you so much for your feedback, really appreciate it.
excellent
Amazing explanation bro!
Great one, I have been enjoying these your design pattern videos and it's been good. Please can you be increasing your zoom level maybe 2 or 3 more times of your code editor when recording, it's pretty hard to read your code even on 1080p as the size is small. Thank you, keep up the great work
Thank you so much for the feedback, I'll make the font bigger next time.
Thanks for the simple explanation. Good job! Keep on it!
Please, provide the github code
Sure, here is the github repo for the whole series: github.com/abruzzi/the-pragmatic-developer
Amazing working mate, thank you so much for sharing
Glad you enjoyed it
Translation? OMG! This is so gorgeous
Yeah, too good to be true.
I am a humble junior dev and I thank you so much for the very helpful work.
You are most welcome
Thank you for the video. One comment, I would disable Webstorm types hints to be more ide agnostic
Hi 👋, thanks for letting me know, I'll try it in my next video.
does not matter in most of cases, but i would place all filtering pipes as close to start of the pipeline as possible to first eliminate items and then mapping them. sometimes it helps not only performance-wise, but more of even in obtaining narrower types down the line. thank you for video
Yeah, that's a great tip too. Thanks for sharing it!
Thanks for sharing
My pleasure
the mind map is top-notch, I think thats how one must go about every problem statement on systems design. Thanks !
agreed
Thanks for sharing this, really appreciated! One tip if I may, while refactoring, instead of moving the original component, it would be cleaner (and smoother) to extract its content into another component and move that one into another file. That is to say leave "MenuList" where it is, extract the content into a "MenuListOld" component that you will move into another file, then return it from the "MenuList" straightaway. This will basically leave the same behaviour as before and create the space for the branching logic without having to change the consumer side. Hope that makes sense :)
Hi Marco, thanks for sharing that here, and I think it's better!
thanks for the content
My pleasure!
Excellent! What extension are you using to show function usage?
Thanks mate, I'm using WebStorm as my main IDE.
Thank you
promo sm 💖
这里感觉不需要useEffect(主要用在有副作用或者某些生命周期) ? total是基于checked和传进来的amount计算的,total不是应该完全可以当一个const total = 。。。。。来计算吗? tip也是. 每一次checked或者props的改变,这个组件都会rerender, 那么tip, total都会重新计算. 不知道我的理解对不对啦.感觉有点绕. ``` function Detail({ amount }) { const [checked, setCheck] = useState(true); const tip = parseFloat(Math.floor(amount + 1) - amount).toPrecision(2); // 直接计算 const total = checked ? Math.floor(amount + 1) : amount; // 直接计算 const handleOnChange = (e) => setCheck(e.target.checked); return (); } ```
I think you're correct, thanks for pointing out and sharing your learnings.
Thanks man, extremely useful!
Thanks, appreciate it.
Please keep continuing teaching like this...I've seen so many system design videos but none of them had the clarity of the mind- map you gave. Kudos!!!
Am I the only one asking himself how is this frontend? I there are 5 topics on which I do not need to be an expert on, but there are expecting me to actually know what I am talking about HOW is this not fullstack or backend?
I think that's a valid point, but like many other things in the industry there isn't a clear boundary between FE or BE or fullstack, especially in current circumstances where the employer has more choice than people who are looking for opportunities (not saying I agree with it but that's what it is). From my experience, for the same position, you will have a higher chance if you have the whole picture in your mind, or if you have some experience on integrate with other parts of software development lifecycle than the pure FE experts. Hope it helps.
Many companies treat front end engineers as a superset of an SDE, as in you're expected to meet the average bar for an SDE at the same level but show exceptional strength in frontend skills. So you'll need to know all this at a minimum. To show your frontend chops you can expound on the user experience portion: how are you managing state? How are error messages being surfaced? How are you implementing routing? Cross browser compatibility? Different screen sizes? And there's much more to dive into for accessibility
Can we mock POST api too with this tool
Yes you can, pretty much the same thing. You can also define models to simulate a backend service to manipulate data in frontend purely - which is pretty handy for some small projects.