Jeff, I truly like the tutorial at this slower pace. Are you experimenting with changing your fast-paced videos style? If you are, please consider sticking to this. Much easier to understand and less rewinds, at least for my tiny little brain.
Finally, I was expecting this! I hope you do a React.js tutorial since it's kinda awesome with the Hooks API and the new Concurrent API coming. Keep up the good work, Jeff!
wouldn't it be smarter to save the form content to localstorage instead? would be easier and the user may not want to send their data to a server before hitting submit. just thinking :) edit: also your form shouldn't be super long anyways if possible. the more I think about it the less use I can see for this. but I don't want to complain, maybe somebody finds it useful :)
I was to write the same suggestion. And add a condition to clear the cached data after form is submitted or prevent automatic form fill if data is older than X time
That's true for a public web form maybe, say a job application or a credit check. But in this case, it's an app feature that is just helping the user, who I assume have already given permission to store such data by using the app or service in the first place. Like in this video, he built a contact app to its basics. You wouldn't expect a submit button on the iOS contacts app for example. It just saves and persists to the DB in the background.
I think he is trying to give a tutorial about firestore (with vue), and not localStorage, even though localStorage could be a better way (idk how secure it is tho)
@@Jason-uv5tm I mean we would just be caching the data, and we could clear the cache after submit. And many people just store auth tokens in local storage so I think using local storage for form cache should be fine
@@Fireship I have never started filling a form on one device and continued on another. If *any* website did this, I would be seriously concerned about my privacy. The online place that this makes sense is auto saving account settings. Personally, I would prefer to use localStorage for any form data for privacy reasons.
I love the use of debounce for limiting writes over time! One area to expand on this solution is to use browser-specific document ids since currently, all users would edit the same Firestore document /contacts/jeff. Maybe something using the browser's user agent?
For everybody whose form doesnt update by reloading the page: This is the whole created hook function: created: async function(){ const docRef = db.doc(documentPath); let data = ( await docRef.get() ).data(); console.log("Data:" + JSON.stringify(data)); if(!data) { data = { name : '', email:'', phone: '' } } this.formData = data; // not shown in the video at 7:43 // this.state = 'synced'; // not shown in the video at 7:43 // },
Can you do a video where you use localstorge or indexeddb for when you are offline so you can store multiple contacts then when you are back online it submits to firebase?
Does anyone know how a firestore web app like this can be passed data upon opening? For example in the video, documentPath is hardcoded. How would it be dynamically set based on perhaps a query parameter passed into the app somehow??
I never struggled with a temporarily saved form concept of Angular, but since I started dipping my toes in Vue I was curious on how to do this in Vue properly
Awesome video!! Very easy to follow along. Only thing, if I'm not mistaken, when you use spread syntax to create a new object it will only de-reference primitive valued props right? So if our form had an object property like data.address.city and we updated it, it would also update our originalData, maybe using JSON.parse(JSON.stringify(data)) would solve this problem.
we need more vue content 🔥🔥🔥🔥
Yes! Ohhhu, yes! :D
Yes please.
That was a pleasure, sir! That debounce it's a gift for Operational costs!
Finally, i was so hyped for this
🔥🔥🔥 CRAVING for more vue + firebase content !!! 🔥🔥🔥
Jeff, I truly like the tutorial at this slower pace. Are you experimenting with changing your fast-paced videos style? If you are, please consider sticking to this. Much easier to understand and less rewinds, at least for my tiny little brain.
You are not alone. Sometimes I slow down the video to watch. 😑
Keep that Vue content coming man, my new role is 50% Vue, 50% Python so this is all super useful. Excellent content as always!
Same here. I just build an desktop application using electron, vue and python.
0:10 "ctrl + shift + tab" it's a life saver :)
Quick and to the point, superb content! Thank you!
Vue JS FTW! So hyped to see you're doing tutorial based on it
Awesome nice simple tutorial ❤ wanna see vue native coming up.
Finally, I was expecting this! I hope you do a React.js tutorial since it's kinda awesome with the Hooks API and the new Concurrent API coming. Keep up the good work, Jeff!
O kon😊😊😊😊😊😊😊😊😊😊
Vue.js 💚
Fireship 🔥
wouldn't it be smarter to save the form content to localstorage instead? would be easier and the user may not want to send their data to a server before hitting submit. just thinking :) edit: also your form shouldn't be super long anyways if possible. the more I think about it the less use I can see for this. but I don't want to complain, maybe somebody finds it useful :)
I was to write the same suggestion. And add a condition to clear the cached data after form is submitted or prevent automatic form fill if data is older than X time
That's true for a public web form maybe, say a job application or a credit check. But in this case, it's an app feature that is just helping the user, who I assume have already given permission to store such data by using the app or service in the first place. Like in this video, he built a contact app to its basics. You wouldn't expect a submit button on the iOS contacts app for example. It just saves and persists to the DB in the background.
I think he is trying to give a tutorial about firestore (with vue), and not localStorage, even though localStorage could be a better way (idk how secure it is tho)
@@Jason-uv5tm I mean we would just be caching the data, and we could clear the cache after submit. And many people just store auth tokens in local storage so I think using local storage for form cache should be fine
You could just save to local storage instead. I love using async and await instead of cascading callbacks.
Great video as usual!
That was a great tutorial, Thanks for that !!
Thanks for all the Vue.js content, I started learning it a few weeks ago, great content
good, easy to understand
Excellent explanations! Thank you so much.
I know that this video is for teaching how to connect vue with firebase, but couldn't you have also done it way easier with the localStorage?
The point is to access this data from any device, but I should have made that more clear.
@@Fireship ah ok
@Jack Clayton but then won't one use react ?
@@Fireship I have never started filling a form on one device and continued on another. If *any* website did this, I would be seriously concerned about my privacy.
The online place that this makes sense is auto saving account settings. Personally, I would prefer to use localStorage for any form data for privacy reasons.
I love the use of debounce for limiting writes over time!
One area to expand on this solution is to use browser-specific document ids since currently, all users would edit the same Firestore document /contacts/jeff. Maybe something using the browser's user agent?
A hice “Bank to the basis” video! Refrescante!
Yay, more videos ab Vue please
Another excellent video. Shame vuefire isn't ready for vue3 and firebase v9. Fingers crossed that will happen soon-ish.
The best! 💚🧡
is it asfe to save your db credential on frontend?
For everybody whose form doesnt update by reloading the page:
This is the whole created hook function:
created: async function(){
const docRef = db.doc(documentPath);
let data = ( await docRef.get() ).data();
console.log("Data:" + JSON.stringify(data));
if(!data) {
data = { name : '', email:'', phone: '' }
}
this.formData = data; // not shown in the video at 7:43 //
this.state = 'synced'; // not shown in the video at 7:43 //
},
Dope stuff!
MOARR SVELTE VIDS!!
Pls upload video on how to structure enterprise app in Angular
wtf shit is so clear I can do it high on a saturday
mfw having fun doing my work , what a wonderful world we live in
thanks alot man keep it up
Cool video👏👏
Can you do a video where you use localstorge or indexeddb for when you are offline so you can store multiple contacts then when you are back online it submits to firebase?
What about local storage and using onload? Or is it making some kind of vulnerability like for spam bots?
If you already use Lodash, they have a debounce method that does the same thing.
So, are we just gonna ignore the 'US Gun Violence' in the project title?
😂😂😂
um where
NGXS in Angular pls
use `vue create -b ...` to create a project without the boilerplate
Good call!
Does anyone know how a firestore web app like this can be passed data upon opening? For example in the video, documentPath is hardcoded. How would it be dynamically set based on perhaps a query parameter passed into the app somehow??
have you done any videos on react and firebase?
This only applies to jeff if there is another user then how to handle that
You get the user ID from their login and contact the id to the path
What's the difference between using debounce and a simple setTimout?
Vue vs Angular. Which one do you guys prefer?
Great video as always! Please, could you update this using Vite (or Vue 3) ? TIA :)
I never struggled with a temporarily saved form concept of Angular, but since I started dipping my toes in Vue I was curious on how to do this in Vue properly
Why don't use localStorage or indexDB, this way you are not retrieving data in your server if the user didn't want to register it at the end.
Please do a video on how to use figma as a beginner
Couldn’t this be easily done using like redux form/formik with redux persist, assuming you’re using react?
humble request: analysis and dissect of Svelte js
Awesome video!! Very easy to follow along.
Only thing, if I'm not mistaken, when you use spread syntax to create a new object it will only de-reference primitive valued props right? So if our form had an object property like data.address.city and we updated it, it would also update our originalData, maybe using JSON.parse(JSON.stringify(data)) would solve this problem.
React with firestore?
Hi! Please do a in depth video on AWS ..
Hey... please do video on react hooks🎣
I love you man
Nice video! But wouldn't it be more effective to just save it to Local Storage?
That works for one device, but this would allow progress to be saved accross all devices.
I think using the local storage would be better for this use case. A db would be overkill.
how to minimize writes cost with this method ?)
For all those who are saying use local storage, how will you save password?
Is this vue3 or vue2?
Localstorage seems like a way better option here. Just dont save the password fields in localstorage!
Lol but why did you install vue-fire?
Looking for similar stuff more with React ;)
I love Vue
more vue videos
no not vue :(
Maybe encrypt the data stored in the firestore document with a local key to prevent other users from potentially accessing the document?
This would not scale well and will cost a lot of read/writes to firebase if the app gets bigger.
so cool xD
what about django ? seems you're not a fan of python . great content :clap:
Why don't we save this in the cookies? Then we don't need a database
any react content?
Yes, expect some react content soon
@@Fireship YESSS THANK YOU!!!
You can auto save with react as well.
documentPath is never changed so everyone will have the same form :)
instead of debounce u can use the lazy event
vuejs.org/v2/guide/forms.html#lazy
Can you see my fire 🔥
Ok nvm, I see itnow.
full name jeff
:)
U so fast i can hardly keep up with your passe 😫
haha first
Gold! 🥇
these tutorials ain't beginner friendly :(
Dude slow down a bit ffs
More Angular videos pls not vue