Great content, it was very informative. However, It felt more like a session on canvas and its low level implementation rather than an HLD interview. Does it make sense to ask this question in an interview to an engineer who has never used canvas/svg ? Just want to know your thoughts.
Yes, you are right, we touched a bit on a low level to make it informative, rather than just interview oriented. Depending on past experience, it's ok to ask/go deeper into such concepts.
Nice Video and well explained :). One thing is missing how to type texts in the shapes?. Can you please reply me in comments. Should we need to create a dynamic div with contenteditable="true" on every shape at runtime? or it's possible with any canvas api?
I have built whiteboard at Vedantu and physicswallah Building a whiteboard for laptop is tough but building for smartboard is different level of challange. One basic challenge is as the canvas size increases the latency increses So we actually have used best of both worlds we are drawing on svg, which gives like 58 to 60fps than canvas which was giving 45 fps and on mouseup we will take that svg data and paint it on canvas and then we can use all the power of canvas ln that .
As far as my feedback is concerned, users love to gain more in less time. So you can work on some time to reduce it to atleast half...but really appreciate the type of description you guys has gone deep in terms of tech structure and design. One more thing that i wanna point is performance, can't we boost performance of canvas resize and zoom events with debouncing?
Good point! Debouncing can always be used on user triggered actions to avoid extra computation. Thanks for your feedback, will try to reduce the video duration. Keep watching #chakdeSystemDesign
Debouncing helps in improving perf but at the same time introduces delay as well so should be used where needed. For resizing - you can try using resize observer instead and set a threshold beyond which you would like to do some action and for zooming as well debouncing is not really needed, instead you could batch the updates (If using React then with React 18 you don't need to batch as well as its taken care by React) for better perf.
@@engineerchirag Don't see any time lines in your videos. Though time stamps are much more convenient if we have less time and want to see some specific parts only. Also, I find that the volume level in all your videos is very low. I have to put on headphones to hear properly when I am watching on my mobile (not having this issue with other videos, so my mobile is fine).
Hey DK, thanks for highlighting the timeline issue. I have fixed it. Regarding audio quality, I'm working on it. Let me know in case you face similar issues in new episodes.
Detailed Timestamps:
0:00 - Introduction
0:36 - Speaker Introduction
2:25 - Problem statement
3:48 - Requirement Discussion
8:48 - Tech Stack Discussion
17:49 - Implementation
18:02 - Implementing - Canvas
19:58 - Implementing - Drawing a rectangle
23:45 - Implementing - Problem with Drawing (a rectangle or) any shape to the canvas
25:33 - Implementing - Data structure to store the shapes & caching canvas using weakMap to enhance performance
32:35 - Implementing - Selecting the shapes
39:23 - Implementing - Moving
45:42 - Implementing - Resizing
58:40 - Implementing - Zooming
1:00:36 - Implementing - Encryption & Security
1:03:56 - Implementing - Infinite Canvas
Very detailed discussion. Thank you both guys.
Thanks for adding detailed timestamp ❤️
this girl's so knowledgable. great guest!
👍
amazing content guys and very detailed and interactive, thanks for knowledge sharing and keep the great content coming 💯
Our pleasure! Keep watching #chakdeSystemDesign
Really a great content, got to learn a lot with this discussion but I believe it is far from real HLD interviews...
Great content, it was very informative. However, It felt more like a session on canvas and its low level implementation rather than an HLD interview. Does it make sense to ask this question in an interview to an engineer who has never used canvas/svg ? Just want to know your thoughts.
Yes, you are right, we touched a bit on a low level to make it informative, rather than just interview oriented.
Depending on past experience, it's ok to ask/go deeper into such concepts.
Nice topic chirag.
It was a very informative video thanks.
Glad you liked it. Keep watching and sharing #chakdeSystemDesign
Thank you so much for bringing such videos 😊.
Can we get a video on website builder, sort of wordpress, wix etc...
Thanks Navaneeth, and keep watching. Yes, will try to plan a detailed one, but some part of it is covered in ua-cam.com/video/6z7ZXb4ntbE/v-deo.html
@@engineerchirag sure, thank you.
Can anyone please share some resources on system design for a whiteboard from a backend pov?
Outstanding interview, thanks for sharing 🙏🏻
Thenks Felipe, keep watching and sharing #chakdeSystemDesign series
Great video. Would have loved to know more about how collaboration feature is implemented in these types of products in depth. Overall, awesome stuff.
Coming soon! Thanks for feedback ❤️
Really I did not get it, implementation part, why guys are jumping that particular requirement, is there any reason?
For implementation part, you should basic APIs of canvas to understand it.
Nice Video and well explained :). One thing is missing how to type texts in the shapes?. Can you please reply me in comments. Should we need to create a dynamic div with contenteditable="true" on every shape at runtime? or it's possible with any canvas api?
Hey Lal, I have share you some resources on DM. As discussed avoid using DOM (div) element on canvas.
@@engineerchirag Can you share the resources description , so that it wil be beneficial to everyone. Thanks for the very informative session.
Amazing,thank you so much ❤️❤️
Glad you like it! ❤️
I have built whiteboard at Vedantu and physicswallah
Building a whiteboard for laptop is tough but building for smartboard is different level of challange.
One basic challenge is as the canvas size increases the latency increses
So we actually have used best of both worlds we are drawing on svg, which gives like 58 to 60fps than canvas which was giving 45 fps and on mouseup we will take that svg data and paint it on canvas and then we can use all the power of canvas ln that .
Great Suggestion ❤️
Just one concern here why didn't we considered free form drawing here ? why only rectangle and all we took in consideration !
As far as my feedback is concerned, users love to gain more in less time. So you can work on some time to reduce it to atleast half...but really appreciate the type of description you guys has gone deep in terms of tech structure and design.
One more thing that i wanna point is performance, can't we boost performance of canvas resize and zoom events with debouncing?
Good point! Debouncing can always be used on user triggered actions to avoid extra computation. Thanks for your feedback, will try to reduce the video duration. Keep watching #chakdeSystemDesign
Debouncing helps in improving perf but at the same time introduces delay as well so should be used where needed. For resizing - you can try using resize observer instead and set a threshold beyond which you would like to do some action and for zooming as well debouncing is not really needed, instead you could batch the updates (If using React then with React 18 you don't need to batch as well as its taken care by React) for better perf.
It will be nice to have timestamps in your videos 🙂
Hey Dhruv, there is the timeline in my videos. You can refer description. Let me double-check if there is any issue. Thanks for highlighting this!
@@engineerchirag Don't see any time lines in your videos. Though time stamps are much more convenient if we have less time and want to see some specific parts only.
Also, I find that the volume level in all your videos is very low. I have to put on headphones to hear properly when I am watching on my mobile (not having this issue with other videos, so my mobile is fine).
Hey DK, thanks for highlighting the timeline issue. I have fixed it. Regarding audio quality, I'm working on it. Let me know in case you face similar issues in new episodes.