title
Meteor.js in 50 Minutes

description
In this crash course we will go over all of the fundamentals of the MeteorJS JavaScript framework. Some of the concepts we will look at are... Installation & Setup Templates MongoDB Collections Minimongo Package Manager Authentication Subscriptions Security 10 PROJECT METEOR COURSE - https://www.eduonix.com/affiliates/id/16-10214

detail
{'title': 'Meteor.js in 50 Minutes', 'heatmap': [{'end': 635.952, 'start': 549.536, 'weight': 1}, {'end': 925.218, 'start': 886.951, 'weight': 0.776}, {'end': 1706.375, 'start': 1669.754, 'weight': 0.77}, {'end': 1852.279, 'start': 1791.592, 'weight': 0.901}], 'summary': "'meteor.js in 50 minutes' covers the introduction to meteorjs as a full-stack javascript framework with subscriptions, creating a meteor application with core functionalities, using meteor.js and spacebar syntax in html, managing tasks in mongodb and javascript, implementing user authentication, and discussing the benefits of using methods and secure subscriptions in meteorjs.", 'chapters': [{'end': 270.975, 'segs': [{'end': 92.237, 'src': 'embed', 'start': 21.747, 'weight': 0, 'content': [{'end': 26.452, 'text': "Now there's a ton of JavaScript frameworks out there, many of which I've done videos on,", 'start': 21.747, 'duration': 4.705}, {'end': 34.8, 'text': 'but I think what separates Meteor from a lot of the other frameworks, such as Angular, is that it runs on both the front end and the back end.', 'start': 26.452, 'duration': 8.348}, {'end': 39.425, 'text': 'And not only that, it uses the same API in the front end and the back end.', 'start': 35.981, 'duration': 3.444}, {'end': 44.51, 'text': 'Meteor can be used for web applications as well as mobile apps.', 'start': 40.366, 'duration': 4.144}, {'end': 54.506, 'text': 'All right, so another big difference that Meteor has is that it uses subscriptions as opposed to requests and response.', 'start': 45.882, 'duration': 8.624}, {'end': 60.509, 'text': 'All right, so most frameworks will make a request to a resource and then send back a response.', 'start': 55.226, 'duration': 5.283}, {'end': 69.673, 'text': 'Well with Meteor, users will subscribe to certain events on the server through a web socket, and the socket constantly serves the subscribers,', 'start': 61.089, 'duration': 8.584}, {'end': 73.415, 'text': "whether it's rendering a template or fetching data, whatever it may be.", 'start': 69.673, 'duration': 3.742}, {'end': 77.639, 'text': 'This makes it very fast, and it also makes it instant.', 'start': 74.655, 'duration': 2.984}, {'end': 85.249, 'text': "Meteor uses MongoDB, and as far as I know, that's the only database that it uses.", 'start': 80.262, 'duration': 4.987}, {'end': 92.237, 'text': "But what's really cool is that you have access to the database from everywhere, on the front end and the back end.", 'start': 86.455, 'duration': 5.782}], 'summary': 'Meteor framework runs on both front end and back end, uses subscriptions, and mongodb.', 'duration': 70.49, 'max_score': 21.747, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vSFH1T3SnBY/pics/vSFH1T3SnBY21747.jpg'}], 'start': 0.896, 'title': 'Introduction to meteorjs', 'summary': 'Introduces meteorjs as a full-stack javascript framework that uses subscriptions instead of requests and response, provides access to mongodb from both front end and back end, and enables easy creation of collections and client-side caching.', 'chapters': [{'end': 270.975, 'start': 0.896, 'title': 'Introduction to meteorjs', 'summary': 'Introduces meteorjs as a full-stack javascript framework that runs on both front end and back end, uses subscriptions instead of requests and response, and offers access to mongodb from both front end and back end, with the ability to create collections easily and achieve client-side caching.', 'duration': 270.079, 'highlights': ['MeteorJS is a full-stack JavaScript framework that runs on both front end and back end, and it offers the same API in both areas. MeteorJS provides a unique feature of running on both front end and back end, utilizing the same API, setting it apart from other frameworks.', 'MeteorJS uses subscriptions instead of requests and response, making it very fast and instant through web sockets. The use of subscriptions instead of requests and response speeds up the process through web sockets, making it instantaneous.', 'MeteorJS offers access to MongoDB from both front end and back end, with the ability to create collections easily and achieve client-side caching. Access to MongoDB from both front end and back end, along with easy collection creation and client-side caching, provides flexibility and efficiency.']}], 'duration': 270.079, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vSFH1T3SnBY/pics/vSFH1T3SnBY896.jpg', 'highlights': ['MeteorJS uses subscriptions instead of requests and response, making it very fast and instant through web sockets.', 'MeteorJS offers access to MongoDB from both front end and back end, with the ability to create collections easily and achieve client-side caching.', 'MeteorJS is a full-stack JavaScript framework that runs on both front end and back end, and it offers the same API in both areas.']}, {'end': 662.975, 'segs': [{'end': 341.634, 'src': 'embed', 'start': 270.995, 'weight': 2, 'content': [{'end': 278.443, 'text': "I know that you're probably here to learn how to create a Meteor application, and we're gonna get to that.", 'start': 270.995, 'duration': 7.448}, {'end': 280.525, 'text': 'I just want to kind of let you know how it works.', 'start': 278.503, 'duration': 2.022}, {'end': 286.432, 'text': "All right, so let's take a look at what the client side consists of, or the browser.", 'start': 281.988, 'duration': 4.444}, {'end': 291.097, 'text': 'Now, a lot of the code uses jQuery and underscore JS as the foundation.', 'start': 286.913, 'duration': 4.184}, {'end': 295, 'text': 'We have Tracker, which provides reactivity on the front end.', 'start': 292.158, 'duration': 2.842}, {'end': 305.31, 'text': "Okay Spacebars, which is the template library that's used in the front end, and this is how we can insert dynamic data into our application,", 'start': 295.02, 'duration': 10.29}, {'end': 308.293, 'text': 'right into the HTML in the view.', 'start': 305.31, 'duration': 2.983}, {'end': 316.78, 'text': "It's extended from handlebars, so if you know handlebars, then you shouldn't have any problems with space bars, which is easy to learn anyway.", 'start': 309.374, 'duration': 7.406}, {'end': 327.045, 'text': 'Blaze is a reactive library that uses tracker and space bars to create a live updating user interface.', 'start': 317.441, 'duration': 9.604}, {'end': 332.607, 'text': "MiniMongo, which we've talked about, that's the client side MongoDB library, which syncs up to the server.", 'start': 327.185, 'duration': 5.422}, {'end': 340.131, 'text': 'And then Sessions, which this is a library to handle reactive user interface state variables.', 'start': 333.188, 'duration': 6.943}, {'end': 341.634, 'text': 'All right.', 'start': 341.314, 'duration': 0.32}], 'summary': 'Learn how to create a meteor application using jquery, underscore js, tracker, spacebars, blaze, minimongo, and sessions for reactive user interface.', 'duration': 70.639, 'max_score': 270.995, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vSFH1T3SnBY/pics/vSFH1T3SnBY270995.jpg'}, {'end': 418.526, 'src': 'embed', 'start': 365.376, 'weight': 0, 'content': [{'end': 376.549, 'text': 'This can range from authentication and authorization to routing, to social functionality and pretty much anything you can think of.', 'start': 365.376, 'duration': 11.173}, {'end': 385.176, 'text': "alright, and atmosphere is a really popular package repository that will be using alright, so we'll get into that later on.", 'start': 376.549, 'duration': 8.627}, {'end': 389.8, 'text': "but for now we're gonna stick to just the core core Meteor functionality.", 'start': 385.176, 'duration': 4.624}, {'end': 393.964, 'text': 'alright, so enough with this boring slide stuff.', 'start': 389.8, 'duration': 4.164}, {'end': 399.109, 'text': "let's go ahead and jump in and just, you know, install Meteor and see where it takes us.", 'start': 393.964, 'duration': 5.145}, {'end': 400.46, 'text': 'All right.', 'start': 400.06, 'duration': 0.4}, {'end': 402.721, 'text': "so let's go ahead and get Meteor installed.", 'start': 400.46, 'duration': 2.261}, {'end': 410.803, 'text': 'Now, Meteor can run on pretty much any platform out there, Windows, Linux, Mac.', 'start': 402.821, 'duration': 7.982}, {'end': 418.526, 'text': "I'm using Windows here, so what we're going to do is go to Meteor.com and click on Install Meteor.", 'start': 411.804, 'duration': 6.722}], 'summary': 'The transcript covers installing meteor, which can run on various platforms such as windows, linux, and mac, and mentions the popular package repository called atmosphere.', 'duration': 53.15, 'max_score': 365.376, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vSFH1T3SnBY/pics/vSFH1T3SnBY365376.jpg'}, {'end': 635.952, 'src': 'heatmap', 'start': 549.536, 'weight': 1, 'content': [{'end': 557.101, 'text': "What I'm going to do is I'm going to say Meteor create, and I'm just going to call this task list.", 'start': 549.536, 'duration': 7.565}, {'end': 563.044, 'text': "Okay, and that's going to go through and create all the folders and files for us.", 'start': 559.802, 'duration': 3.242}, {'end': 570.468, 'text': 'All right, and if I go to sublime text, and let me add that folder to as a project.', 'start': 563.604, 'duration': 6.864}, {'end': 579.968, 'text': "Let's see, task list.", 'start': 578.427, 'duration': 1.541}, {'end': 586.332, 'text': 'Okay, so if we look over here, we have a folder called media.', 'start': 580.969, 'duration': 5.363}, {'end': 594.416, 'text': "This holds like everything, all the media stuff, MongoDB, all that crap that you don't need to touch.", 'start': 586.932, 'duration': 7.484}, {'end': 596.497, 'text': "So don't even pay attention to that.", 'start': 594.796, 'duration': 1.701}, {'end': 603.942, 'text': 'What it does is it gives you an HTML file, a CSS file, and a JavaScript, all named whatever you called your application.', 'start': 597.538, 'duration': 6.404}, {'end': 612.287, 'text': 'all. right now, if we look at the html, it gives us a little sample app and i guess we can run that.', 'start': 604.722, 'duration': 7.565}, {'end': 618.93, 'text': 'just to show you all, right now it says to run your app, go into task list and type in meteor.', 'start': 612.287, 'duration': 6.643}, {'end': 625.835, 'text': "all right, so let's go to task list and meteor.", 'start': 618.93, 'duration': 6.905}, {'end': 631.318, 'text': "okay, so let's see we need to allow access through the firewall.", 'start': 625.835, 'duration': 5.483}, {'end': 635.952, 'text': 'And now it says what does it say??', 'start': 632.909, 'duration': 3.043}], 'summary': 'Creating a task list using meteor, adding folder to project, and running the app via meteor.', 'duration': 86.416, 'max_score': 549.536, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vSFH1T3SnBY/pics/vSFH1T3SnBY549536.jpg'}], 'start': 270.995, 'title': 'Meteor application creation and core functionality', 'summary': "Covers creating a meteor application, utilizing jquery, underscore js, tracker, and spacebars for reactivity and dynamic data insertion. it also introduces meteor's core functionalities such as blaze for live ui updates, minimongo, and the meteor package manager, with instructions for installation and new application creation.", 'chapters': [{'end': 316.78, 'start': 270.995, 'title': 'Creating a meteor application', 'summary': 'Discusses the client side of a meteor application, including the use of jquery, underscore js, tracker for reactivity, and spacebars for inserting dynamic data into html views.', 'duration': 45.785, 'highlights': ['The chapter discusses the client side of a Meteor application The chapter delves into the client side of a Meteor application, providing insights into the usage of jQuery, underscore JS, Tracker, and Spacebars.', 'jQuery and underscore JS as the foundation The code uses jQuery and underscore JS as the foundational components for the client side of the Meteor application.', 'Tracker provides reactivity on the front end Tracker is utilized to provide reactivity on the front end of the Meteor application, enhancing user experience and real-time data updates.', 'Spacebars for inserting dynamic data into HTML views Spacebars, an extension of handlebars, is employed to insert dynamic data into HTML views, allowing for seamless integration of data into the application interface.']}, {'end': 662.975, 'start': 317.441, 'title': 'Introduction to meteor and its core functionality', 'summary': 'Introduces the core functionality of meteor, including blaze for live updating user interface, minimongo as the client-side mongodb library, and the meteor package manager for installing small libraries or add-ons, with instructions on how to install meteor on various platforms and create a new meteor application.', 'duration': 345.534, 'highlights': ["Meteor package manager allows installation of small libraries or add-ons for new functionality, including authentication, authorization, routing, and social functionality. Meteor's package manager enables the installation of various add-ons, such as authentication, authorization, routing, and social functionality, expanding the core functionality of Meteor.", "Instructions on how to install Meteor on various platforms, including Windows, Linux, and Mac, and create a new Meteor application using 'Meteor create'. The chapter provides detailed instructions on how to install Meteor on different platforms and create a new Meteor application using the 'Meteor create' command.", 'Introduction to Blaze, MiniMongo, and Sessions as core functionalities of Meteor for live updating user interface, client-side MongoDB library, and handling reactive user interface state variables, respectively. The chapter introduces Blaze for live updating user interface, MiniMongo as the client-side MongoDB library, and Sessions for handling reactive user interface state variables as core functionalities of Meteor.']}], 'duration': 391.98, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vSFH1T3SnBY/pics/vSFH1T3SnBY270995.jpg', 'highlights': ["Instructions on how to install Meteor on various platforms and create a new Meteor application using 'Meteor create'.", 'Meteor package manager allows installation of small libraries or add-ons for new functionality, including authentication, authorization, routing, and social functionality.', 'Introduction to Blaze, MiniMongo, and Sessions as core functionalities of Meteor for live updating user interface, client-side MongoDB library, and handling reactive user interface state variables, respectively.', 'Spacebars for inserting dynamic data into HTML views, allowing for seamless integration of data into the application interface.', 'jQuery and underscore JS as the foundational components for the client side of the Meteor application.', 'Tracker provides reactivity on the front end of the Meteor application, enhancing user experience and real-time data updates.', 'The chapter delves into the client side of a Meteor application, providing insights into the usage of jQuery, underscore JS, Tracker, and Spacebars.']}, {'end': 1192.255, 'segs': [{'end': 687.819, 'src': 'embed', 'start': 662.975, 'weight': 0, 'content': [{'end': 669.323, 'text': "if we click it, it's going to increase this number by one, alright, and if we reload, it goes back to zero.", 'start': 662.975, 'duration': 6.348}, {'end': 671.946, 'text': "So let's take a look at the code that runs this.", 'start': 669.964, 'duration': 1.982}, {'end': 675.709, 'text': 'So the HTML here, you can see we just have an HTML document.', 'start': 672.426, 'duration': 3.283}, {'end': 679.612, 'text': 'Inside of our body we have an H1 and then we have this thing here.', 'start': 676.329, 'duration': 3.283}, {'end': 687.819, 'text': "So this is using the spacebar syntax which is very similar to handlebars if you've ever used that.", 'start': 680.453, 'duration': 7.366}], 'summary': 'Clicking increases the number by one and reload resets to zero. html has h1 and spacebar syntax.', 'duration': 24.844, 'max_score': 662.975, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vSFH1T3SnBY/pics/vSFH1T3SnBY662975.jpg'}, {'end': 738.683, 'src': 'embed', 'start': 711.074, 'weight': 1, 'content': [{'end': 716.297, 'text': 'now, inside the render, inside the hello template, we have a button and then we have a paragraph.', 'start': 711.074, 'duration': 5.223}, {'end': 719.318, 'text': 'but in the paragraph you can see we have this counter variable.', 'start': 716.297, 'duration': 3.021}, {'end': 721.24, 'text': "okay, and we're using space bars.", 'start': 719.318, 'duration': 1.922}, {'end': 724.544, 'text': 'so this counter is coming from.', 'start': 722.04, 'duration': 2.504}, {'end': 729.591, 'text': 'if we look in the javascript, we have this right here template dot hello dot.', 'start': 724.544, 'duration': 5.047}, {'end': 733.196, 'text': 'helpers, that counter is coming from here.', 'start': 729.591, 'duration': 3.605}, {'end': 738.683, 'text': "okay, so we're returning something here which is session dot, get dot counter.", 'start': 733.196, 'duration': 5.487}], 'summary': "The javascript code returns the counter variable from the session, using the 'get' method.", 'duration': 27.609, 'max_score': 711.074, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vSFH1T3SnBY/pics/vSFH1T3SnBY711074.jpg'}, {'end': 780.215, 'src': 'embed', 'start': 754.805, 'weight': 2, 'content': [{'end': 760.893, 'text': "okay, in this particular event is going to be a click event and it's going to be on a button.", 'start': 754.805, 'duration': 6.088}, {'end': 765.999, 'text': "And then it runs this function and what it's doing is it's setting that counter.", 'start': 761.794, 'duration': 4.205}, {'end': 771.226, 'text': "It's setting it to whatever the counter is plus one.", 'start': 766.66, 'duration': 4.566}, {'end': 774.61, 'text': "That's why every time we click it, it adds a new one.", 'start': 771.866, 'duration': 2.744}, {'end': 780.215, 'text': 'All right, so just remember that, that templates have helpers, which are just functions.', 'start': 775.632, 'duration': 4.583}], 'summary': 'A click event on a button runs a function to increment a counter.', 'duration': 25.41, 'max_score': 754.805, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vSFH1T3SnBY/pics/vSFH1T3SnBY754805.jpg'}, {'end': 831.393, 'src': 'embed', 'start': 805.885, 'weight': 3, 'content': [{'end': 813.087, 'text': "If Meteor.isClient and then anything that's inside of this is only going to run on the client, all right?", 'start': 805.885, 'duration': 7.202}, {'end': 815.887, 'text': 'And then down here we have Meteor.isServer.', 'start': 813.147, 'duration': 2.74}, {'end': 819.048, 'text': "Anything that's in here is going to run only on the server.", 'start': 816.407, 'duration': 2.641}, {'end': 822.249, 'text': 'Anything outside of these is going to run on both.', 'start': 819.668, 'duration': 2.581}, {'end': 824.03, 'text': 'So just remember that.', 'start': 822.969, 'duration': 1.061}, {'end': 831.393, 'text': "Normally, if you're building a real application, you'll have a folder called client, or whatever you want to call it,", 'start': 824.99, 'duration': 6.403}], 'summary': 'Using meteor.isclient and meteor.isserver for client-server code separation.', 'duration': 25.508, 'max_score': 805.885, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vSFH1T3SnBY/pics/vSFH1T3SnBY805885.jpg'}, {'end': 875.789, 'src': 'embed', 'start': 847.793, 'weight': 4, 'content': [{'end': 852.017, 'text': 'All right, so what I want to do now is just get rid of this altogether.', 'start': 847.793, 'duration': 4.224}, {'end': 856.14, 'text': 'All right, so everything inside is client.', 'start': 852.037, 'duration': 4.103}, {'end': 856.961, 'text': "Let's get rid of.", 'start': 856.2, 'duration': 0.761}, {'end': 860.255, 'text': 'Okay, and then everything in is server.', 'start': 858.373, 'duration': 1.882}, {'end': 866.741, 'text': 'Okay So what I want to do is create a collection called tasks.', 'start': 861.316, 'duration': 5.425}, {'end': 867.361, 'text': 'All right.', 'start': 867.041, 'duration': 0.32}, {'end': 870.144, 'text': "So up here, we're going to say tasks.", 'start': 868.102, 'duration': 2.042}, {'end': 873.347, 'text': 'Now this code needs to be run on both.', 'start': 870.224, 'duration': 3.123}, {'end': 875.789, 'text': "So you don't want to have it inside either of these.", 'start': 873.447, 'duration': 2.342}], 'summary': 'Creating a collection called tasks to be run on both client and server.', 'duration': 27.996, 'max_score': 847.793, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vSFH1T3SnBY/pics/vSFH1T3SnBY847793.jpg'}, {'end': 925.218, 'src': 'heatmap', 'start': 886.951, 'weight': 0.776, 'content': [{'end': 897.618, 'text': 'tasks. before I even type anything in here in our code, I just want to show you that we can access the collection from the browser, from the client alright,', 'start': 886.951, 'duration': 10.667}, {'end': 899.499, 'text': 'just by having this.', 'start': 897.618, 'duration': 1.881}, {'end': 908.505, 'text': "so we save that and actually let's go to the HTML and let's Get rid of this for now.", 'start': 899.499, 'duration': 9.006}, {'end': 911.768, 'text': "Actually, you know what we'll do is let's put right here.", 'start': 908.605, 'duration': 3.163}, {'end': 918.833, 'text': "I guess we can call the template to do's and then we'll change that to to do's.", 'start': 911.788, 'duration': 7.045}, {'end': 921.595, 'text': "And for now, I'm just going to get rid of this.", 'start': 919.814, 'duration': 1.781}, {'end': 925.218, 'text': "All right, so let's go ahead and save that and reload.", 'start': 921.615, 'duration': 3.603}], 'summary': 'Demonstrated access to collection from browser using code.', 'duration': 38.267, 'max_score': 886.951, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vSFH1T3SnBY/pics/vSFH1T3SnBY886951.jpg'}, {'end': 965.855, 'src': 'embed', 'start': 935.24, 'weight': 5, 'content': [{'end': 944.125, 'text': "So what I'm going to do is go down here and we're going to say tasks, okay, whatever you name your collection, .find and then .fetch.", 'start': 935.24, 'duration': 8.885}, {'end': 956.012, 'text': "All right, and it's going to return whatever we have in the task collection, which of course is nothing, but you can see it gives us an empty array.", 'start': 949.17, 'duration': 6.842}, {'end': 959.833, 'text': 'All right, now we can actually add tasks from here.', 'start': 956.032, 'duration': 3.801}, {'end': 965.855, 'text': "So let's say tasks, task.insert.", 'start': 960.013, 'duration': 5.842}], 'summary': 'Demonstrating task retrieval and addition from the collection.', 'duration': 30.615, 'max_score': 935.24, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vSFH1T3SnBY/pics/vSFH1T3SnBY935240.jpg'}, {'end': 1068.259, 'src': 'embed', 'start': 1033.184, 'weight': 6, 'content': [{'end': 1034.885, 'text': 'Okay, two tasks.', 'start': 1033.184, 'duration': 1.701}, {'end': 1043.028, 'text': 'So this right here is an example of what sets Meteor aside from a lot of those other JS frameworks.', 'start': 1036.064, 'duration': 6.964}, {'end': 1047.851, 'text': 'Now if we want to display these in the browser, we can.', 'start': 1044.429, 'duration': 3.422}, {'end': 1050.232, 'text': "We'll go to our JavaScript file.", 'start': 1047.891, 'duration': 2.341}, {'end': 1055.096, 'text': 'And we know that we now have a template called tasks.', 'start': 1052.635, 'duration': 2.461}, {'end': 1062.337, 'text': "So let's say template.tasks.", 'start': 1055.776, 'duration': 6.561}, {'end': 1065.758, 'text': 'Is that what I called? Oh, I called it to dos.', 'start': 1062.477, 'duration': 3.281}, {'end': 1067.258, 'text': "Oh, that's wrong.", 'start': 1066.078, 'duration': 1.18}, {'end': 1068.259, 'text': "Let's call it tasks.", 'start': 1067.298, 'duration': 0.961}], 'summary': 'Meteor framework allows easy display of tasks in the browser.', 'duration': 35.075, 'max_score': 1033.184, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vSFH1T3SnBY/pics/vSFH1T3SnBY1033184.jpg'}], 'start': 662.975, 'title': 'Using meteor.js and spacebar syntax in html', 'summary': 'Covers the use of spacebar syntax for dynamic content in html, and leveraging meteor.js for client-server code, including setting default counters, segregating client and server code, creating a collection called tasks, querying and adding tasks, and displaying tasks in the browser.', 'chapters': [{'end': 780.215, 'start': 662.975, 'title': 'Dynamic content in html using spacebar syntax', 'summary': 'Discusses the use of spacebar syntax for dynamic content in html, demonstrating how a template named hello renders a button and a paragraph with a counter variable, which is updated through a click event, resulting in the increase of the counter by one on each click.', 'duration': 117.24, 'highlights': ['The chapter discusses the use of spacebar syntax for dynamic content in HTML It explains how spacebar syntax is used to render dynamic content in an HTML view.', 'A template named hello renders a button and a paragraph with a counter variable The template named hello includes a button and a paragraph with a counter variable, demonstrating the use of dynamic content.', 'The counter variable is updated through a click event, resulting in the increase of the counter by one on each click The click event on the button updates the counter variable, increasing it by one with each click.']}, {'end': 1192.255, 'start': 780.595, 'title': 'Using meteor.js for client-server code', 'summary': 'Discusses using meteor.js for client-server code, including setting default counters, segregating client and server code, creating a collection called tasks, querying and adding tasks, and displaying tasks in the browser using template helpers and html.', 'duration': 411.66, 'highlights': ['Meteor runs on the client and server, allowing segregation of code using Meteor.isClient and Meteor.isServer, while dynamic functionality runs on both. Meteor allows segregation of code using Meteor.isClient and Meteor.isServer, with dynamic functionality running on both.', "Creation of a collection called tasks using tasks = new Mongo.collection('tasks'), accessible from both the client and server. The speaker demonstrates the creation of a collection called tasks, accessible from both the client and server.", 'Querying and adding tasks to the collection using tasks.find and tasks.insert, with examples of querying and fetching tasks from the browser. The speaker provides examples of querying and adding tasks to the collection, demonstrating querying and fetching tasks from the browser.', 'Displaying tasks in the browser using template helpers and HTML, including iterating through tasks and outputting their names in a UL list. The chapter explains the process of displaying tasks in the browser using template helpers and HTML, specifically iterating through tasks and outputting their names in a UL list.']}], 'duration': 529.28, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vSFH1T3SnBY/pics/vSFH1T3SnBY662975.jpg', 'highlights': ['The chapter explains how spacebar syntax is used to render dynamic content in an HTML view.', 'The template named hello includes a button and a paragraph with a counter variable, demonstrating the use of dynamic content.', 'The click event on the button updates the counter variable, increasing it by one with each click.', 'Meteor allows segregation of code using Meteor.isClient and Meteor.isServer, with dynamic functionality running on both.', 'The speaker demonstrates the creation of a collection called tasks, accessible from both the client and server.', 'The speaker provides examples of querying and adding tasks to the collection, demonstrating querying and fetching tasks from the browser.', 'The chapter explains the process of displaying tasks in the browser using template helpers and HTML, specifically iterating through tasks and outputting their names in a UL list.']}, {'end': 1706.375, 'segs': [{'end': 1260.432, 'src': 'embed', 'start': 1192.255, 'weight': 0, 'content': [{'end': 1201.761, 'text': "there's our tasks alright, and it's persisted to our Mongo database, so we can still add them down here.", 'start': 1192.255, 'duration': 9.506}, {'end': 1208.061, 'text': "let's say we want to add three, and it automatically gets added.", 'start': 1201.761, 'duration': 6.3}, {'end': 1217.225, 'text': "If I reload, it's still there because it was persisted into the collection on the server in MongoDB.", 'start': 1210.142, 'duration': 7.083}, {'end': 1225.013, 'text': 'Now what if we want to be able to add tasks from our application, which is probably what you want.', 'start': 1219.19, 'duration': 5.823}, {'end': 1229.815, 'text': "You probably don't want your users to have to open up a console and add them.", 'start': 1225.033, 'duration': 4.782}, {'end': 1230.635, 'text': 'All right.', 'start': 1230.355, 'duration': 0.28}, {'end': 1241.14, 'text': "So what we'll do is let's say add task and down here we're going to have an H3 that just says tasks.", 'start': 1230.695, 'duration': 10.445}, {'end': 1246.302, 'text': "Okay And then we'll put a simple form here.", 'start': 1244.221, 'duration': 2.081}, {'end': 1258.011, 'text': "Okay, I realize that this isn't gonna look too good.", 'start': 1255.35, 'duration': 2.661}, {'end': 1260.432, 'text': "I don't really care about the design and what it looks like.", 'start': 1258.071, 'duration': 2.361}], 'summary': 'Tasks are persisted in mongo database, allowing for easy addition and retrieval from the application.', 'duration': 68.177, 'max_score': 1192.255, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vSFH1T3SnBY/pics/vSFH1T3SnBY1192255.jpg'}, {'end': 1468.229, 'src': 'embed', 'start': 1398.624, 'weight': 2, 'content': [{'end': 1402.186, 'text': "And instead of in our helpers, we're going to need to set up our events.", 'start': 1398.624, 'duration': 3.562}, {'end': 1406.108, 'text': 'So template.tasks.events.', 'start': 1402.486, 'duration': 3.622}, {'end': 1419.788, 'text': "Okay, so the way that we're going to set this up is we need the actual event, which is going to be a submit.", 'start': 1412.597, 'duration': 7.191}, {'end': 1424.755, 'text': 'And then we need the element, which is going to be add task.', 'start': 1420.689, 'duration': 4.066}, {'end': 1427.82, 'text': "Alright, so then we'll run a function.", 'start': 1425.757, 'duration': 2.063}, {'end': 1438.431, 'text': "Okay, I'm gonna pass in an event parameter here and then what we'll do is create a variable called name,", 'start': 1431.408, 'duration': 7.023}, {'end': 1447.074, 'text': "and we're gonna set this to event.target.name.value.", 'start': 1438.431, 'duration': 8.643}, {'end': 1449.635, 'text': "Okay, and that'll give us whatever we put in the form.", 'start': 1447.094, 'duration': 2.541}, {'end': 1456.198, 'text': "And just to test this out, let's do console.log name.", 'start': 1450.335, 'duration': 5.863}, {'end': 1459.339, 'text': "Okay, so we'll reload.", 'start': 1456.218, 'duration': 3.121}, {'end': 1461.464, 'text': 'All right.', 'start': 1461.084, 'duration': 0.38}, {'end': 1463.846, 'text': "And we'll say test submit.", 'start': 1461.664, 'duration': 2.182}, {'end': 1468.229, 'text': 'And you can see that it did flash down there.', 'start': 1465.727, 'duration': 2.502}], 'summary': 'Setting up events for submit and add task, testing with console.log', 'duration': 69.605, 'max_score': 1398.624, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vSFH1T3SnBY/pics/vSFH1T3SnBY1398624.jpg'}, {'end': 1538.931, 'src': 'embed', 'start': 1502.262, 'weight': 4, 'content': [{'end': 1515.335, 'text': "All right, so to do that, we can say tasks.insert And then in here, we're going to do the same thing that we did from within the console earlier.", 'start': 1502.262, 'duration': 13.073}, {'end': 1518.937, 'text': "We'll say name, and that's going to be name.", 'start': 1516.156, 'duration': 2.781}, {'end': 1527.744, 'text': "It's also going to have created at, and that's going to be new date.", 'start': 1520.298, 'duration': 7.446}, {'end': 1536.59, 'text': "And then we just want to clear the form, so we'll grab this, and we're going to set it to nothing.", 'start': 1528.264, 'duration': 8.326}, {'end': 1538.931, 'text': 'alright, and that should do it.', 'start': 1537.81, 'duration': 1.121}], 'summary': 'Using tasks.insert to add new task and clear form.', 'duration': 36.669, 'max_score': 1502.262, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vSFH1T3SnBY/pics/vSFH1T3SnBY1502262.jpg'}, {'end': 1706.375, 'src': 'heatmap', 'start': 1669.754, 'weight': 0.77, 'content': [{'end': 1677.141, 'text': 'remove and then we can pass in this dot underscore ID.', 'start': 1669.754, 'duration': 7.387}, {'end': 1689.472, 'text': "alright, so let's give that a shot All right now, if I click Task 5X, delete task, okay, and it goes away.", 'start': 1677.141, 'duration': 12.331}, {'end': 1692.073, 'text': "Okay, it's as easy as that.", 'start': 1689.492, 'duration': 2.581}, {'end': 1694.435, 'text': 'If I reload, we still only have three.', 'start': 1692.113, 'duration': 2.322}, {'end': 1702.993, 'text': "Now, chances are, if you're building an application and you're able to add or remove data from a database,", 'start': 1695.768, 'duration': 7.225}, {'end': 1706.375, 'text': "you don't want just anybody to be able to come to the app and do that.", 'start': 1702.993, 'duration': 3.382}], 'summary': 'Demonstrating removal of task with specific id, safeguarding database from unauthorized access', 'duration': 36.621, 'max_score': 1669.754, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vSFH1T3SnBY/pics/vSFH1T3SnBY1669754.jpg'}, {'end': 1706.375, 'src': 'embed', 'start': 1677.141, 'weight': 5, 'content': [{'end': 1689.472, 'text': "alright, so let's give that a shot All right now, if I click Task 5X, delete task, okay, and it goes away.", 'start': 1677.141, 'duration': 12.331}, {'end': 1692.073, 'text': "Okay, it's as easy as that.", 'start': 1689.492, 'duration': 2.581}, {'end': 1694.435, 'text': 'If I reload, we still only have three.', 'start': 1692.113, 'duration': 2.322}, {'end': 1702.993, 'text': "Now, chances are, if you're building an application and you're able to add or remove data from a database,", 'start': 1695.768, 'duration': 7.225}, {'end': 1706.375, 'text': "you don't want just anybody to be able to come to the app and do that.", 'start': 1702.993, 'duration': 3.382}], 'summary': 'Demonstrated task deletion feature, limiting database access.', 'duration': 29.234, 'max_score': 1677.141, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vSFH1T3SnBY/pics/vSFH1T3SnBY1677141.jpg'}], 'start': 1192.255, 'title': 'Managing tasks in mongodb and javascript', 'summary': 'Demonstrates adding and persisting tasks in a mongodb collection, creating form submission events in javascript, and managing tasks by inserting, deleting, and confirming their persistence, aiming to emphasize functionality over design.', 'chapters': [{'end': 1360.146, 'start': 1192.255, 'title': 'Adding tasks to mongodb', 'summary': 'Demonstrates how tasks can be added and persisted in a mongodb collection, and how to create a form for adding tasks to the application, emphasizing functionality over design.', 'duration': 167.891, 'highlights': ['Tasks can be added and persisted in a MongoDB collection. The tasks added are automatically persisted in the MongoDB collection on the server, as demonstrated by adding three tasks and then confirming their persistence upon reloading.', 'Creating a form for adding tasks to the application. The chapter covers the process of creating a simple form for adding tasks to the application, prioritizing functionality over design and emphasizing the input elements required for task addition.']}, {'end': 1501.901, 'start': 1360.146, 'title': 'Creating form submission event', 'summary': 'Explains the process of setting up a form submission event in javascript, including setting up the event, defining the element and running a function to handle the submission, and testing the functionality with console.log, ultimately aiming to submit the form to a collection.', 'duration': 141.755, 'highlights': ['The process involves setting up the event, defining the element, and running a function to handle the submission, as demonstrated by setting the event type to submit, assigning a class to the form, and creating an event function in JavaScript.', 'The functionality is tested by using console.log to display the submitted form data, exemplified by creating a variable to store the form input and using console.log to verify the captured data.', 'The ultimate goal is to submit the form data to a collection, indicated by the intention to return false after handling the form submission event.']}, {'end': 1706.375, 'start': 1502.262, 'title': 'Managing tasks in javascript', 'summary': 'Explains how to insert and delete tasks in javascript, demonstrating the process and functionality of adding and removing tasks, as well as confirming their persistence.', 'duration': 204.113, 'highlights': ['The chapter demonstrates inserting tasks by using tasks.insert method and clearing the form after insertion for better user experience.', 'The process of deleting tasks is explained, including the creation of delete buttons, event handling, and the removal of tasks from the database, ensuring data security and user control.', 'The importance of restricting unauthorized access to data manipulation functionalities in an application is emphasized to maintain security and integrity of the database.']}], 'duration': 514.12, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vSFH1T3SnBY/pics/vSFH1T3SnBY1192255.jpg', 'highlights': ['Tasks can be added and persisted in a MongoDB collection, automatically persisted on the server.', 'Creating a form for adding tasks, prioritizing functionality over design.', 'Setting up the event, defining the element, and running a function to handle the submission.', 'Testing functionality by using console.log to display the submitted form data.', 'Demonstrating inserting tasks using tasks.insert method and clearing the form after insertion.', 'Explaining the process of deleting tasks, including event handling and removal from the database.', 'Emphasizing the importance of restricting unauthorized access to data manipulation functionalities.']}, {'end': 2361.423, 'segs': [{'end': 1766.07, 'src': 'embed', 'start': 1706.896, 'weight': 0, 'content': [{'end': 1713.16, 'text': 'So we can easily implement some authentication here or user accounts in Meteor.', 'start': 1706.896, 'duration': 6.264}, {'end': 1716.102, 'text': 'And we can do that with a simple package.', 'start': 1713.58, 'duration': 2.522}, {'end': 1718.824, 'text': "So let's go back to our command line.", 'start': 1716.422, 'duration': 2.402}, {'end': 1723.047, 'text': "I'm going to Control C and just get out of everything.", 'start': 1719.885, 'duration': 3.162}, {'end': 1734.434, 'text': "And what we're going to do here is we're going to say media add, and then you can add your packages.", 'start': 1726.292, 'duration': 8.142}, {'end': 1738.535, 'text': 'All right, so we want one called accounts UI.', 'start': 1734.454, 'duration': 4.081}, {'end': 1744.976, 'text': 'And we also want one called accounts password.', 'start': 1739.695, 'duration': 5.281}, {'end': 1746.577, 'text': 'Okay, just like that.', 'start': 1744.996, 'duration': 1.581}, {'end': 1747.517, 'text': "So we'll run that.", 'start': 1746.697, 'duration': 0.82}, {'end': 1755.42, 'text': 'Alright guys, that took quite a while.', 'start': 1753.999, 'duration': 1.421}, {'end': 1757.643, 'text': 'It took about five minutes or so for some reason.', 'start': 1755.44, 'duration': 2.203}, {'end': 1761.126, 'text': "I don't know if yours is going to take that long or not.", 'start': 1757.663, 'duration': 3.463}, {'end': 1766.07, 'text': "But once it's done, you should see this screen in your command line.", 'start': 1761.366, 'duration': 4.704}], 'summary': 'Implementing user authentication in meteor using accounts ui and accounts password took about five minutes.', 'duration': 59.174, 'max_score': 1706.896, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vSFH1T3SnBY/pics/vSFH1T3SnBY1706896.jpg'}, {'end': 1868.125, 'src': 'heatmap', 'start': 1791.592, 'weight': 1, 'content': [{'end': 1798.277, 'text': 'and then what we want to put in here is login buttons All right, just like that.', 'start': 1791.592, 'duration': 6.685}, {'end': 1817.111, 'text': "So we'll save that and now let's go ahead and run the app, and all right.", 'start': 1798.558, 'duration': 18.553}, {'end': 1823.472, 'text': 'so that should now be running.', 'start': 1817.111, 'duration': 6.361}, {'end': 1826.573, 'text': 'and now you can see above everything we have this sign in.', 'start': 1823.472, 'duration': 3.101}, {'end': 1830.334, 'text': 'we click that, we have this little email password input.', 'start': 1826.573, 'duration': 3.761}, {'end': 1833.554, 'text': 'we also have a create account link right here.', 'start': 1830.334, 'duration': 3.22}, {'end': 1836.935, 'text': "okay, so we obviously don't have an account.", 'start': 1833.554, 'duration': 3.381}, {'end': 1852.279, 'text': "so let's go ahead and create one and we'll put in our email password create account and once we create the account we're actually logged in.", 'start': 1836.935, 'duration': 15.344}, {'end': 1857.161, 'text': 'okay, if we click that, we could change our password and we can sign out.', 'start': 1852.279, 'duration': 4.882}, {'end': 1863.223, 'text': 'alright. so that is extremely simple to set up just our basic authentication.', 'start': 1857.161, 'duration': 6.062}, {'end': 1868.125, 'text': "now we have the authentication, but it's not actually stopping us from doing anything.", 'start': 1863.223, 'duration': 4.902}], 'summary': 'Setting up basic authentication with login buttons and account creation.', 'duration': 31.19, 'max_score': 1791.592, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vSFH1T3SnBY/pics/vSFH1T3SnBY1791592.jpg'}, {'end': 2079.333, 'src': 'embed', 'start': 2045.865, 'weight': 3, 'content': [{'end': 2047.546, 'text': 'We want to specifically..', 'start': 2045.865, 'duration': 1.681}, {'end': 2052.568, 'text': 'Subscribe to certain stuff on the server.', 'start': 2049.387, 'duration': 3.181}, {'end': 2061.59, 'text': "now, when we deploy, when we set up an application like we have, there's something, there's a package called insecure that it uses,", 'start': 2052.568, 'duration': 9.022}, {'end': 2068.571, 'text': "and The reason that it's set to true when you first create an app is to just to be able to quickly prototype it,", 'start': 2061.59, 'duration': 6.981}, {'end': 2073.512, 'text': 'To not have any boundaries and be able to do whatever you want from the client, from the server.', 'start': 2068.571, 'duration': 4.941}, {'end': 2079.333, 'text': "but when you're ready for production, you're going to want to remove that package and And then you're going to want to use what are called methods,", 'start': 2073.512, 'duration': 5.821}], 'summary': 'When deploying an application, remove insecure package for production and use methods.', 'duration': 33.468, 'max_score': 2045.865, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vSFH1T3SnBY/pics/vSFH1T3SnBY2045865.jpg'}, {'end': 2184.667, 'src': 'embed', 'start': 2155.636, 'weight': 4, 'content': [{'end': 2160.637, 'text': "And let's think about the functionality that we want to have as a method.", 'start': 2155.636, 'duration': 5.001}, {'end': 2166.559, 'text': 'So in our application, the two main things we can do is add a task and delete a task.', 'start': 2160.737, 'duration': 5.822}, {'end': 2169.159, 'text': "All right, so let's do one for add task.", 'start': 2166.579, 'duration': 2.58}, {'end': 2171.519, 'text': "Okay, so we'll call it add task.", 'start': 2169.179, 'duration': 2.34}, {'end': 2173.86, 'text': "It's going to be a function.", 'start': 2172.8, 'duration': 1.06}, {'end': 2178.045, 'text': "It's going to get passed in a name.", 'start': 2176.304, 'duration': 1.741}, {'end': 2184.667, 'text': 'And what we want to do here is we want to check for the user.', 'start': 2181.005, 'duration': 3.662}], 'summary': 'Developing functionality to add and delete tasks in application', 'duration': 29.031, 'max_score': 2155.636, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vSFH1T3SnBY/pics/vSFH1T3SnBY2155636.jpg'}], 'start': 1706.896, 'title': 'Implementing user and basic authentication in meteor', 'summary': 'Covers implementing user authentication in meteor using accounts ui and accounts password packages, setting up login buttons, and creating user accounts, taking around 5 minutes for installation. it also demonstrates adding user authentication, restricting access, removing insecure package for production readiness, and implementing secure methods for adding and deleting tasks.', 'chapters': [{'end': 1868.125, 'start': 1706.896, 'title': 'Implementing user authentication in meteor', 'summary': 'Explains how to implement user authentication in meteor using accounts ui and accounts password packages, with a demonstration of setting up login buttons and creating user accounts, taking around 5 minutes for installation.', 'duration': 161.229, 'highlights': ['The installation of accounts UI and accounts password packages took about five minutes.', 'After installation, login buttons were placed in the HTML to enable user authentication.', 'The process of creating a user account and logging in was demonstrated, providing access to password change and sign out functionalities.']}, {'end': 2361.423, 'start': 1868.125, 'title': 'Implementing basic authentication with meteor', 'summary': 'Demonstrates adding user authentication to a meteor application, restricting access to logged-in users, removing insecure package for production readiness, and implementing secure methods for adding and deleting tasks.', 'duration': 493.298, 'highlights': ['The chapter demonstrates adding user authentication to a Meteor application The process involves adding the user id as part of the task object and using an if statement to check if the current user is logged in.', 'Removing insecure package for production readiness The insecure package, initially set to true for quick prototyping, is removed to prevent client interference with server data, ensuring a more secure application for production.', 'Implementing secure methods for adding and deleting tasks Secure methods are implemented using Meteor.Methods to control functionality like adding and deleting tasks, with checks for user authorization and passing task parameters through Meteor.call.']}], 'duration': 654.527, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vSFH1T3SnBY/pics/vSFH1T3SnBY1706896.jpg', 'highlights': ['The installation of accounts UI and accounts password packages took about five minutes.', 'The process of creating a user account and logging in was demonstrated, providing access to password change and sign out functionalities.', 'The chapter demonstrates adding user authentication to a Meteor application.', 'Removing insecure package for production readiness The insecure package, initially set to true for quick prototyping, is removed to prevent client interference with server data, ensuring a more secure application for production.', 'Implementing secure methods for adding and deleting tasks Secure methods are implemented using Meteor.Methods to control functionality like adding and deleting tasks, with checks for user authorization and passing task parameters through Meteor.call.']}, {'end': 2888.32, 'segs': [{'end': 2405.215, 'src': 'embed', 'start': 2364.164, 'weight': 0, 'content': [{'end': 2370.906, 'text': 'now. not only is using methods more secure, but it also allows you to keep all your functions in one place,', 'start': 2364.164, 'duration': 6.742}, {'end': 2374.086, 'text': 'which is a lot easier than having scattered everywhere.', 'start': 2370.906, 'duration': 3.18}, {'end': 2380.088, 'text': 'right now, if you are building a production application, you would have a different file structure.', 'start': 2374.086, 'duration': 6.002}, {'end': 2389.65, 'text': "you would have a client folder for your client code, a server folder and probably a methods file, a file that's dedicated to your methods,", 'start': 2380.088, 'duration': 9.562}, {'end': 2394.972, 'text': 'right and not in this, in this mini course or whatever you want to call it.', 'start': 2389.65, 'duration': 5.322}, {'end': 2402.234, 'text': "I'm not going to be doing that but I will be doing a more in-depth application with Meteor very soon.", 'start': 2395.452, 'duration': 6.782}, {'end': 2405.215, 'text': "Alright so we'll look into that for another time.", 'start': 2402.254, 'duration': 2.961}], 'summary': 'Using methods in one place is more secure and convenient for a production application with meteor.', 'duration': 41.051, 'max_score': 2364.164, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vSFH1T3SnBY/pics/vSFH1T3SnBY2364164.jpg'}, {'end': 2643.626, 'src': 'embed', 'start': 2596.763, 'weight': 1, 'content': [{'end': 2609.699, 'text': "so we want to go up here, back into the client, And let's say Meteor.subscribe.", 'start': 2596.763, 'duration': 12.936}, {'end': 2613.622, 'text': 'And we want to subscribe to tasks.', 'start': 2611.36, 'duration': 2.262}, {'end': 2617.004, 'text': "OK, so let's save that.", 'start': 2615.363, 'duration': 1.641}, {'end': 2618.886, 'text': 'And hopefully that works.', 'start': 2617.685, 'duration': 1.201}, {'end': 2625.851, 'text': 'All right, good.', 'start': 2625.371, 'duration': 0.48}, {'end': 2627.592, 'text': 'So now we can see our tasks again.', 'start': 2625.951, 'duration': 1.641}, {'end': 2630.995, 'text': "And you can see this is the one that I actually added when we couldn't see them.", 'start': 2627.612, 'duration': 3.383}, {'end': 2636.942, 'text': 'If I try to delete, we can also delete them.', 'start': 2632.719, 'duration': 4.223}, {'end': 2643.626, 'text': 'If I try to add, we can also add them.', 'start': 2637.702, 'duration': 5.924}], 'summary': 'Configured client to subscribe to tasks, enabling viewing and modifying tasks.', 'duration': 46.863, 'max_score': 2596.763, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vSFH1T3SnBY/pics/vSFH1T3SnBY2596763.jpg'}, {'end': 2702.952, 'src': 'embed', 'start': 2672.154, 'weight': 4, 'content': [{'end': 2679.659, 'text': 'Okay, So now we just created a new account, as John, and we logged in, and You can see that we can see all of our tasks,', 'start': 2672.154, 'duration': 7.505}, {'end': 2685.224, 'text': "all the tasks that were created by Brad's account, And I can go ahead and delete them.", 'start': 2679.659, 'duration': 5.565}, {'end': 2688.967, 'text': "All right, and that's not really what we want.", 'start': 2685.244, 'duration': 3.723}, {'end': 2692.329, 'text': "You don't want people to be able to touch your stuff.", 'start': 2688.967, 'duration': 3.362}, {'end': 2702.952, 'text': 'Okay, we want Brad to have his own task list and then John to have his own, and anyone else who who registers for this application?', 'start': 2692.329, 'duration': 10.623}], 'summary': 'New account created; need separate task lists for users.', 'duration': 30.798, 'max_score': 2672.154, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vSFH1T3SnBY/pics/vSFH1T3SnBY2672154.jpg'}, {'end': 2888.32, 'src': 'embed', 'start': 2866.033, 'weight': 3, 'content': [{'end': 2867.834, 'text': "So we're only seeing our own tasks.", 'start': 2866.033, 'duration': 1.801}, {'end': 2871.055, 'text': "Alright, so I think I'm going to end it here.", 'start': 2868.834, 'duration': 2.221}, {'end': 2875.516, 'text': 'We covered basically all the fundamentals of MeteorJS.', 'start': 2871.155, 'duration': 4.361}, {'end': 2877.657, 'text': 'And hopefully you guys liked it.', 'start': 2876.256, 'duration': 1.401}, {'end': 2878.917, 'text': 'You learned something from it.', 'start': 2877.737, 'duration': 1.18}, {'end': 2882.298, 'text': 'I apologize, it did go a little longer than I had planned.', 'start': 2879.297, 'duration': 3.001}, {'end': 2884.399, 'text': "But yeah, so that's it.", 'start': 2882.958, 'duration': 1.441}, {'end': 2885.339, 'text': 'Please subscribe.', 'start': 2884.499, 'duration': 0.84}, {'end': 2886.799, 'text': 'Leave it a like if you liked it.', 'start': 2885.499, 'duration': 1.3}, {'end': 2888.32, 'text': 'And thanks for watching.', 'start': 2887.44, 'duration': 0.88}], 'summary': 'Covered meteorjs fundamentals, apologized for longer duration, and encouraged subscriptions and likes.', 'duration': 22.287, 'max_score': 2866.033, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vSFH1T3SnBY/pics/vSFH1T3SnBY2866033.jpg'}], 'start': 2364.164, 'title': 'Benefits of methods in app development and secure subscriptions in meteorjs', 'summary': 'Discusses the advantages of using methods in app development, such as enhanced security and improved function organization. it also covers creating secure subscriptions in meteorjs, resulting in user-specific data security and management.', 'chapters': [{'end': 2405.215, 'start': 2364.164, 'title': 'Benefits of using methods in application development', 'summary': 'Discusses the benefits of using methods in application development, such as improved security and easier organization of functions in one place, as opposed to a scattered file structure, in building a production application.', 'duration': 41.051, 'highlights': ['Using methods in application development provides improved security and allows for organizing all functions in one place, making it easier than having them scattered everywhere.', 'Building a production application typically involves a different file structure with separate folders for client code, server code, and a dedicated methods file.', 'The speaker plans to delve into a more in-depth application with Meteor in the future, providing a deeper understanding of its application in real-world scenarios.']}, {'end': 2888.32, 'start': 2405.235, 'title': 'Creating secure subscriptions in meteorjs', 'summary': 'Covers creating secure subscriptions in meteorjs, removing auto-publish, implementing subscriptions, and securing user-specific data by using user ids, resulting in the ability to view and manage tasks only for the respective user accounts.', 'duration': 483.085, 'highlights': ['Implemented secure subscriptions by removing auto-publish and adding subscriptions based on user IDs Removed auto-publish and added subscriptions based on user IDs, allowing users to view and manage only their tasks, resulting in improved security and user-specific data access.', 'Covered the fundamentals of MeteorJS and emphasized the importance of securing user data Covered the fundamentals of MeteorJS and emphasized the importance of securing user data, providing a comprehensive understanding of creating secure subscriptions and user-specific data access.', 'Highlighted the process of creating user-specific task lists and restricting access based on user accounts Demonstrated the process of creating user-specific task lists and restricting access based on user accounts, ensuring that users can only view and manage their own tasks for improved data privacy and security.']}], 'duration': 524.156, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/vSFH1T3SnBY/pics/vSFH1T3SnBY2364164.jpg', 'highlights': ['Using methods in application development provides improved security and allows for organizing all functions in one place, making it easier than having them scattered everywhere.', 'Implemented secure subscriptions by removing auto-publish and adding subscriptions based on user IDs, allowing users to view and manage only their tasks, resulting in improved security and user-specific data access.', 'Building a production application typically involves a different file structure with separate folders for client code, server code, and a dedicated methods file.', 'Covered the fundamentals of MeteorJS and emphasized the importance of securing user data, providing a comprehensive understanding of creating secure subscriptions and user-specific data access.', 'Highlighted the process of creating user-specific task lists and restricting access based on user accounts, ensuring that users can only view and manage their own tasks for improved data privacy and security.', 'The speaker plans to delve into a more in-depth application with Meteor in the future, providing a deeper understanding of its application in real-world scenarios.']}], 'highlights': ['MeteorJS uses subscriptions instead of requests and response, making it very fast and instant through web sockets.', 'MeteorJS offers access to MongoDB from both front end and back end, with the ability to create collections easily and achieve client-side caching.', 'MeteorJS is a full-stack JavaScript framework that runs on both front end and back end, and it offers the same API in both areas.', "Instructions on how to install Meteor on various platforms and create a new Meteor application using 'Meteor create'.", 'Meteor package manager allows installation of small libraries or add-ons for new functionality, including authentication, authorization, routing, and social functionality.', 'Introduction to Blaze, MiniMongo, and Sessions as core functionalities of Meteor for live updating user interface, client-side MongoDB library, and handling reactive user interface state variables, respectively.', 'Spacebars for inserting dynamic data into HTML views, allowing for seamless integration of data into the application interface.', 'jQuery and underscore JS as the foundational components for the client side of the Meteor application.', 'Tracker provides reactivity on the front end of the Meteor application, enhancing user experience and real-time data updates.', 'The chapter delves into the client side of a Meteor application, providing insights into the usage of jQuery, underscore JS, Tracker, and Spacebars.', 'The chapter explains how spacebar syntax is used to render dynamic content in an HTML view.', 'The template named hello includes a button and a paragraph with a counter variable, demonstrating the use of dynamic content.', 'The click event on the button updates the counter variable, increasing it by one with each click.', 'Meteor allows segregation of code using Meteor.isClient and Meteor.isServer, with dynamic functionality running on both.', 'The speaker demonstrates the creation of a collection called tasks, accessible from both the client and server.', 'The speaker provides examples of querying and adding tasks to the collection, demonstrating querying and fetching tasks from the browser.', 'The chapter explains the process of displaying tasks in the browser using template helpers and HTML, specifically iterating through tasks and outputting their names in a UL list.', 'Tasks can be added and persisted in a MongoDB collection, automatically persisted on the server.', 'Creating a form for adding tasks, prioritizing functionality over design.', 'Setting up the event, defining the element, and running a function to handle the submission.', 'Testing functionality by using console.log to display the submitted form data.', 'Demonstrating inserting tasks using tasks.insert method and clearing the form after insertion.', 'Explaining the process of deleting tasks, including event handling and removal from the database.', 'Emphasizing the importance of restricting unauthorized access to data manipulation functionalities.', 'The installation of accounts UI and accounts password packages took about five minutes.', 'The process of creating a user account and logging in was demonstrated, providing access to password change and sign out functionalities.', 'The chapter demonstrates adding user authentication to a Meteor application.', 'Removing insecure package for production readiness The insecure package, initially set to true for quick prototyping, is removed to prevent client interference with server data, ensuring a more secure application for production.', 'Implementing secure methods for adding and deleting tasks Secure methods are implemented using Meteor.Methods to control functionality like adding and deleting tasks, with checks for user authorization and passing task parameters through Meteor.call.', 'Using methods in application development provides improved security and allows for organizing all functions in one place, making it easier than having them scattered everywhere.', 'Implemented secure subscriptions by removing auto-publish and adding subscriptions based on user IDs, allowing users to view and manage only their tasks, resulting in improved security and user-specific data access.', 'Building a production application typically involves a different file structure with separate folders for client code, server code, and a dedicated methods file.', 'Covered the fundamentals of MeteorJS and emphasized the importance of securing user data, providing a comprehensive understanding of creating secure subscriptions and user-specific data access.', 'Highlighted the process of creating user-specific task lists and restricting access based on user accounts, ensuring that users can only view and manage their own tasks for improved data privacy and security.', 'The speaker plans to delve into a more in-depth application with Meteor in the future, providing a deeper understanding of its application in real-world scenarios.']}