I know this really doesn't matter, but if you want an exact A4 paper size you should use these measuraments: width: 21cm; min-height: 29.7cm; Yes, cm is a CSS unit for centimeters
I recommend you cache the document when you save it and then next time you save it, make sure changes have been made to the document before updating the database. That way you can eliminate unnecessary database writes and API calls.
So I implemented this pretty simply with just a let oldData and compared it to the data passed in the saved change function using JSON.stringify(oldData) === JSON.stringify(data) and it works great. But one issue I'm unsure of is what would happen if another browser window accessed the document within the two second window of saving. What would occur? Would it be better to just call this any time a change is made on the doc instead of setting an interval and caching? Wouldn't it be much more consistent that way? Or does this matter? I guess if someone else is accessing the document at that exact moment it is still an open socket so it would be seen by the new user?? I'm confused by this lol
Actually that was a potential issue. I did a quick test my self and saw it sometime did not catch all the data. It seems like a small issue but could be problematic with a lot of people. I decided to emit "save-document" right after I emit "send-changes". I kept it a separate emit for ease and to reuse save as a button incase someone doesn't trust the auto save. Either way this fixed the issue for me on a personal testing stand point. I'm sure this would still have errors somehow like with a lot of changes, but maybe ill look into a message queue or something if that's a possible issue
I would rather have a throttled function whenever a user changes their content. This way you ensure that 1- DB writes only when changes are made 2- for each text change, you only do one write to the DB
Bug : If you are getting double texteditors Fixation : When Strict Mode is on, React will run one extra development-only setup+cleanup cycle before the first real setup. This is a stress-test that ensures that your cleanup logic “mirrors” your setup logic and that it stops or undoes whatever the setup is doing. If this causes a problem, implement the cleanup function.{source: reactdocs}
I was so skeptical how is he gonna build something like that in just 46 minutes. But woah! This is amazing and even though I have experience in working with react and socket, still I learned so much! Great video!
Please, if you're reading this. Learn about operational transformations (OT). A set of algorithms for real-time collaboration. Y'all know sockets are expensive.
I am doing my own little socket app and I mainly came for the explanation of implementing socket which starts at 23:07, but I definitely enjoyed the other parts. Thanks for the good content.
between your spotify's background refreshing, this background saving and a little useCallback thrown in there, good stuff man. Enjoying these React projects!
Super cool , however title is misleading. Google Docs have so much complex stuff like pages , headers , footers , page zones , columns . This is just Quill with save to DB
This really is a great tutorial, almost a year later. Do know that a good bit has changed re: the "Handling Multiple Documents" chapter of the video…"react-router-dom" has upgraded to v.6 something and changed "Switch" to "Routes" and "Redirect" is now "Navigate", and you have to change the way react allows the jsx to be used.
Thank you for the excellent point. Regarding "you have to change the way react allows the jsx to be used.", can you tell me specifically how to modify the code?
Bro you are just awesome. No comments just awesome. My first point of reference related to MERN or web itself. For me you are the "single source of concept" from the beginning. And I wish I reach your level of expertise very fast
Thank you for the greate tutorial Kyle! It would be wonderful if you could record a video about how to deploy full-stack app to repository. Because it's important to show projects to employer. Thanks in advance!
Would be useful if you could create the editor by your self. Looking forward to a video where you create a text editor with all standard features like text selection(changing it's calligraphy)
dong that is a pain in the arse and not nesecary since so many solutions out there justt take them and adjust it according to your needs is better then doing from scratch nooob
@@ilin76bb Dude you sound like some phony lazy arse dev who can't think and is totally dependant on others. Man if you are a serious dev then you would want to create the editor by yourselves, not because the self made is better in fact quill would be a better choice for production, but since this is a channel where he teaches js this will make your understand more deeper concepts thoroughly. Please refrain from calling noobs and all cause only a shortsighted person would do so
@@adityak1231 My advice to you is search for explanations about the mvc and then go to a tutorial where they apply to it. Which videos? If there is a database (Mongo, postgress, mysql...) and they use it, and they do a folder called "controllers" they are using it.
@@ivss8927 Hey thanks. That comment was 1 month back and I've learnt a lot in that duration. I had a fully working website with a mongodb database at that point with an MVC architecture and I wanted to use React in it. I don't need it now because I'm comfortable with the full MERN stack now. Thanks again though.
Is it ok to have socket.on("send-changes", ) inside socket.on("get-document", ) ? If it works like addEventListener probably it's a bad idea because it just appends a new listener of the same type on the same object to a new anonymous function and this can create bugs due to multiple unnecessary calls (I saw this kind of mistake in the video about the piano app as well). Usually any kind of event listener should be added once per tuple of (object, type, function) unless the callback function is not anonymous and is the same (probably stored in a more global context). Any way I think in this case you can get away by sending the documentId along side with the delta as one data object and you can acces them inside socket.on("send-changes", ) and take it outside of socket.on("get-document", ). And the same applies for the socket.on("save-document", ). Or...is socket (on the server) a different object for each client? Great video and cheers! This Quill library is good to know about it. Thanks
setQuill(q) -> results on an error because it repeatedly calls setState inside componentDidUpdate or componentDidMount. React throws an error to avoid loops
@@oa1197 There are some more angular course on yt, you can learn from them, I guess Kyle is not close on doing it, how about angular course by traversy media
@@aguyoninternet9883 Traversy Media is the must go in many Crash Courses hehe, i recommend it to. In fact i was planing to learn php with him (you know, for the legacy stuff of business xd)
its dope man, does it has new page kinda thing in it, like google docs has, like if you exceding bottom of the page , then it automatically goes to next page ????
Now we can sell it to Google so that they can do their interviews in it
but doesn't invert a binary tree 😆
I know this really doesn't matter, but if you want an exact A4 paper size you should use these measuraments:
width: 21cm;
min-height: 29.7cm;
Yes, cm is a CSS unit for centimeters
I needed to know this. I am actually coding a packing slip for an e-commerce business. Since they are printable, an A4 size would be great.
Thanks!
@@sidheshwartiwari9834 you're welcome! Glad to know I helped :D
Great info 👍🏻
I recommend you cache the document when you save it and then next time you save it, make sure changes have been made to the document before updating the database. That way you can eliminate unnecessary database writes and API calls.
So I implemented this pretty simply with just a let oldData and compared it to the data passed in the saved change function using JSON.stringify(oldData) === JSON.stringify(data) and it works great. But one issue I'm unsure of is what would happen if another browser window accessed the document within the two second window of saving. What would occur? Would it be better to just call this any time a change is made on the doc instead of setting an interval and caching? Wouldn't it be much more consistent that way? Or does this matter? I guess if someone else is accessing the document at that exact moment it is still an open socket so it would be seen by the new user?? I'm confused by this lol
Actually that was a potential issue. I did a quick test my self and saw it sometime did not catch all the data. It seems like a small issue but could be problematic with a lot of people. I decided to emit "save-document" right after I emit "send-changes". I kept it a separate emit for ease and to reuse save as a button incase someone doesn't trust the auto save. Either way this fixed the issue for me on a personal testing stand point. I'm sure this would still have errors somehow like with a lot of changes, but maybe ill look into a message queue or something if that's a possible issue
@@patcodingcodester9781 My guess a collision of some type which is why the caching was recommended.
I would rather have a throttled function whenever a user changes their content. This way you ensure that 1- DB writes only when changes are made 2- for each text change, you only do one write to the DB
Bug : If you are getting double texteditors
Fixation : When Strict Mode is on, React will run one extra development-only setup+cleanup cycle before the first real setup. This is a stress-test that ensures that your cleanup logic “mirrors” your setup logic and that it stops or undoes whatever the setup is doing. If this causes a problem, implement the cleanup function.{source: reactdocs}
I was so skeptical how is he gonna build something like that in just 46 minutes. But woah! This is amazing and even though I have experience in working with react and socket, still I learned so much! Great video!
yeah me too
You make creating these projects look so easy! One could only wish to create such an awesome and fluent tutorial
Please, if you're reading this. Learn about operational transformations (OT). A set of algorithms for real-time collaboration. Y'all know sockets are expensive.
Funny how I needed this yesterday. Either way, I'm happy there are more videos on this.
I am doing my own little socket app and I mainly came for the explanation of implementing socket which starts at 23:07, but I definitely enjoyed the other parts. Thanks for the good content.
I saw your project upload on github and knew it was coming!
between your spotify's background refreshing, this background saving and a little useCallback thrown in there, good stuff man. Enjoying these React projects!
Super cool , however title is misleading. Google Docs have so much complex stuff like pages , headers , footers , page zones , columns . This is just Quill with save to DB
This is the best channel about Web dev I've ever seen!
great video! I would love it if you made a video implementing this with an OT or CRDT library for synchronization.
This really is a great tutorial, almost a year later. Do know that a good bit has changed re: the "Handling Multiple Documents" chapter of the video…"react-router-dom" has upgraded to v.6 something and changed "Switch" to "Routes" and "Redirect" is now "Navigate", and you have to change the way react allows the jsx to be used.
Thank you for the excellent point.
Regarding "you have to change the way react allows the jsx to be used.", can you tell me specifically how to modify the code?
Resolved! please forget about my previous question.
Here is my code:
yes need code bro can u help
Kyle never disappoints, great video 👏
Bro you are just awesome. No comments just awesome. My first point of reference related to MERN or web itself. For me you are the "single source of concept" from the beginning. And I wish I reach your level of expertise very fast
You really did what your name is "Web dev simplified". Thanks a lot for such a great content.Keep posting .Thanks again 😁
This is actually a great css tutorials as well!
Could you do a follow up video explaning how to proceed with the V6 react-router-dom?
👇update of react-router-dom v6 👇
import {BrowserRouter as Router,Route,Routes,Navigate,} from "react-router-dom";
// Switch > Routes
//Redirect > Navigate
// component > element
// no more exact path for '/'
This channel is best simply for learning web stuff
Thanks for the Hostinger mention. I'll check it out!
Just incredible work man. Perfectly described and explained.
Love this channel
worth watching!
Brilliant stuff ! I can imagine the amount of research to pull off something so good.
That is updated code due to new version of React.
Thank you for the greate tutorial Kyle! It would be wonderful if you could record a video about how to deploy full-stack app to repository. Because it's important to show projects to employer. Thanks in advance!
Would be useful if you could create the editor by your self. Looking forward to a video where you create a text editor with all standard features like text selection(changing it's calligraphy)
dong that is a pain in the arse and not nesecary since so many solutions out there
justt take them and adjust it according to your needs is better then doing from scratch nooob
@@ilin76bb Dude you sound like some phony lazy arse dev who can't think and is totally dependant on others. Man if you are a serious dev then you would want to create the editor by yourselves, not because the self made is better in fact quill would be a better choice for production, but since this is a channel where he teaches js this will make your understand more deeper concepts thoroughly.
Please refrain from calling noobs and all cause only a shortsighted person would do so
@@mthaha2735 sorry noob.
Crazy tutorial! Nice job Kyle!
Unbelievable build in 45 minutes! and very neat explanation. so cool video. Thank you so much bro ❤🍻
And I can't wait to know how u can do this... Exceptional kyle
I haven't watched this tutorial ye but brooooooo ...
I'm excited.
Perfect one 😉
Pls can u do Spotify Clone another time and Netflix clone too and mainly Amazon clone
@@losing_interest_in_everything Hey do you know any vid which shows how to use react with an MVC structure?
@@adityak1231 My advice to you is search for explanations about the mvc and then go to a tutorial where they apply to it. Which videos? If there is a database (Mongo, postgress, mysql...) and they use it, and they do a folder called "controllers" they are using it.
@@ivss8927 Hey thanks. That comment was 1 month back and I've learnt a lot in that duration. I had a fully working website with a mongodb database at that point with an MVC architecture and I wanted to use React in it. I don't need it now because I'm comfortable with the full MERN stack now. Thanks again though.
@@adityak1231 do you do nextJs or u comfy with just React?
@@trueuchiha2042 Just React
nice tutorial, how to create multiple pages? if we reach a word limit, we will jump to a new page instead of just increasing the textbox size
21:39 Correct me if I'm wrong but I think that CORS stands for cross-origin resource sharing.
yeah i think so#
amazing tutorial time to make notion.so next
Me like a week ago: hmm i wonder how to make a google docs clone
This video: :)
Thank you!
if only you uploaded this 2 years earlies...
I wanted to same but as mark down editor, Great Content
Your tutorial is really awesome and very helpful.
Nowadays, typescript is very popular and if you make the video with typescript , it would be great.
how can we make this multipage google docs project. For example if we hit a word limit we jump to a new page instead of just increasing size text box
Can you make a tutorial on how to add pages that google docs or word has?
gg i watch every second...didn't notice the video was 47 min.....best code tutorial ever, easy to understand....good job
wow dude what an awesome tutorial!
Amazing! thank you! please do more short app tutorials
Brother could you please please do this in angular too, Would really love to do this project in angular🙂
Great trick with useCallback instead of useRef
Ek number bhai
Cel ung'shade, angeke ngik'phoxe 😍😜
Hostinger is the the Best
Really cool! Thanks for putting this together!
This was a fantastic tutorial! Thank you!
😆 wow you are really amazing, you make the explication super easy
Custom Google excel next pls
how to deploy this
Hey plz make a video on how to handle multiple collection in database plz
aren't you the best ? yes you are
Can someone tell me how to deploy this project??
How can we deploy it???
Web Dev Simplified in 5 years: Google Search Engine clone with the algorithm
Awesome as always 👍😀
great one bud!
Is it ok to have socket.on("send-changes", ) inside socket.on("get-document", ) ? If it works like addEventListener probably it's a bad idea because it just appends a new listener of the same type on the same object to a new anonymous function and this can create bugs due to multiple unnecessary calls (I saw this kind of mistake in the video about the piano app as well). Usually any kind of event listener should be added once per tuple of (object, type, function) unless the callback function is not anonymous and is the same (probably stored in a more global context). Any way I think in this case you can get away by sending the documentId along side with the delta as one data object and you can acces them inside socket.on("send-changes", ) and take it outside of socket.on("get-document", ). And the same applies for the socket.on("save-document", ). Or...is socket (on the server) a different object for each client?
Great video and cheers! This Quill library is good to know about it. Thanks
Awesome video! The client folder code didn't get committed to the repo properly btw.
💯👍👍 Yes! This is what I wanted!
🎉🎉🎉 thank you Kyle, how to create multiple pages using quill just like word-document???
nice tutorial, thank you
Great idea, amazing really cool project 💪👌
Nice. Now please create a Google Sheets clone
Great Job 👏👏👏
Very nice, what is main benefit from cloning google docs, spotify...
I saw many videos like this, clone this, clone that...
What if i wanted to deploy the server on something like AWS or Heroku, how would i know which port and location my client would need to connect to?
It would be great if you show us how we can add authentication from another backend to this (e.g. a django or rails application).
Thanks
I took you project from github but I can't run it what version of node are you using? How can I install the modules corectly?
Very useful, thanks
I don't know why the loading is not going from my sheet I've event tried copy pasting your code but still facing same issue.
Hi Sir! Is it possible to open a word file then edit like what google docs does? Thank you in advance.
HI, Thanks for this tutorial, i have question, like how to send the value from MS docx file text as default
One video On How to build Netflix in React js
setQuill(q) -> results on an error because it repeatedly calls setState inside componentDidUpdate or componentDidMount. React throws an error to avoid loops
PLEASE MAKE DEPLOYMENT !!
Maybe a newbie question but what is the proper way to store rich/formatted text like this to database (mysql)?
I want to like it once again 😀
To było dobre :) Very nice thx !
So much covered in less than an hour.
Sooo helpfull
great work
Will you make a tutorial on game development
you are a god!
how do you handle multiple pages?
Thank you so much! Are you planning on making an Angular course anytime soon?
Why use that shitty and unnecessarily large angular when you have it's dad React
@@aguyoninternet9883 I also prefer react but my uni wants us to use Angular this semester so I have to learn it :)
@@oa1197 oh, I see
@@oa1197 There are some more angular course on yt, you can learn from them, I guess Kyle is not close on doing it, how about angular course by traversy media
@@aguyoninternet9883 Traversy Media is the must go in many Crash Courses hehe, i recommend it to. In fact i was planing to learn php with him (you know, for the legacy stuff of business xd)
This is perfect 💯👍👏
I love your videos.
hey can u make a video about signing a PDF using nodesignpdf module
Next How to create your own Chrome
its dope man, does it has new page kinda thing in it, like google docs has, like if you exceding bottom of the page , then it automatically goes to next page ????
How to add table support in this editor?
Just build the Firebase already))
That's so cool! Really informative video :)