title
Documenting Your JavaScript | JSDoc Crash Course

description
In this video I will go over JSDoc for documenting your JavaScript code as well as using it for type checking Sponsor: Linode Cloud Hosting Get $20 Free by visiting https://www.linode.com/traversy Code: https://github.com/bradtraversy/jsdoc-examples 💖 Become a Patron: Show support & get perks! http://www.patreon.com/traversymedia Website & Udemy Course Links: https://www.traversymedia.com Follow Traversy Media: https://www.twitter.com/traversymedia https://www.instagram.com/traversymedia https://www.facebook.com/traversymedia

detail
{'title': 'Documenting Your JavaScript | JSDoc Crash Course', 'heatmap': [{'end': 133.234, 'start': 106.731, 'weight': 0.78}, {'end': 264.827, 'start': 213.852, 'weight': 0.945}], 'summary': 'Provides a comprehensive overview of jsdoc, covering its features, installation, configuration, and usage for creating documentation websites with node express, react, or vue. it also explains javascript type checking, custom type creation, typescript type definition, and integrating tutorials into documentation.', 'chapters': [{'end': 276.092, 'segs': [{'end': 52.594, 'src': 'embed', 'start': 21.607, 'weight': 2, 'content': [{'end': 27.917, 'text': "Hey, what's going on, guys? In this video, we're going to look at JSDoc, which is something I've been experimenting with lately that I really like.", 'start': 21.607, 'duration': 6.31}, {'end': 31.562, 'text': 'It is a JavaScript documentation generator.', 'start': 28.197, 'duration': 3.365}, {'end': 32.584, 'text': 'So, basically,', 'start': 31.742, 'duration': 0.842}, {'end': 44.272, 'text': 'you can add these inline JSDoc comments right into your source code And you can use JSDoc to scan through and create an entire documentation website for your code.', 'start': 32.584, 'duration': 11.688}, {'end': 52.594, 'text': 'And you can document just variables, classes, functions, modules, whatever function parameters, their types.', 'start': 44.632, 'duration': 7.962}], 'summary': 'Overview of jsdoc, a javascript documentation generator for creating website documentation from inline comments.', 'duration': 30.987, 'max_score': 21.607, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YK-GurROGIg/pics/YK-GurROGIg21607.jpg'}, {'end': 112.873, 'src': 'embed', 'start': 85.595, 'weight': 0, 'content': [{'end': 93.602, 'text': "So let's jump into VS Code and we can install JSDoc with NPM and you can use it on the back end with Node Express.", 'start': 85.595, 'duration': 8.007}, {'end': 95.284, 'text': 'You can also use it on the front end.', 'start': 93.922, 'duration': 1.362}, {'end': 100.749, 'text': 'You can use it with React or Vue or whatever you want to use it with to document your code.', 'start': 95.684, 'duration': 5.065}, {'end': 101.649, 'text': 'all right.', 'start': 101.329, 'duration': 0.32}, {'end': 106.731, 'text': "so let's go ahead and npm init, dash y just to create a package.json.", 'start': 101.649, 'duration': 5.082}, {'end': 112.873, 'text': "i'm going to try to go kind of fast because i don't want the video to be too too long.", 'start': 106.731, 'duration': 6.142}], 'summary': 'Install jsdoc with npm for backend and frontend documentation in vs code.', 'duration': 27.278, 'max_score': 85.595, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YK-GurROGIg/pics/YK-GurROGIg85595.jpg'}, {'end': 133.234, 'src': 'heatmap', 'start': 106.731, 'weight': 0.78, 'content': [{'end': 112.873, 'text': "i'm going to try to go kind of fast because i don't want the video to be too too long.", 'start': 106.731, 'duration': 6.142}, {'end': 117.075, 'text': "so let's npm install as a dev dependency js doc.", 'start': 112.873, 'duration': 4.202}, {'end': 123.091, 'text': 'OK, so that should get added to our package.json file.', 'start': 119.81, 'duration': 3.281}, {'end': 126.232, 'text': 'Now, jsdoc needs a config file.', 'start': 123.611, 'duration': 2.621}, {'end': 127.912, 'text': "Actually, you don't need to create it.", 'start': 126.252, 'duration': 1.66}, {'end': 129.773, 'text': "It will use defaults if you don't.", 'start': 127.932, 'duration': 1.841}, {'end': 133.234, 'text': "But we're going to go ahead and create jsdoc.json.", 'start': 130.032, 'duration': 3.202}], 'summary': 'Install jsdoc as a dev dependency and create jsdoc.json config file.', 'duration': 26.503, 'max_score': 106.731, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YK-GurROGIg/pics/YK-GurROGIg106731.jpg'}, {'end': 264.827, 'src': 'heatmap', 'start': 213.852, 'weight': 0.945, 'content': [{'end': 223.281, 'text': "so let's say JSDoc and then we want to do the config file, which is JSDoc.json.", 'start': 213.852, 'duration': 9.429}, {'end': 228.043, 'text': "Okay, so it'll always look at this config file for whatever settings we have.", 'start': 223.401, 'duration': 4.642}, {'end': 231.365, 'text': "All right, and then let's create our source folder.", 'start': 228.063, 'duration': 3.302}, {'end': 239.408, 'text': "Okay, so this is where your actual code goes, and we'll just have an index.js, and then I'm going to run npm run doc.", 'start': 231.865, 'duration': 7.543}, {'end': 248.701, 'text': 'All right, so as you can see over here, I created a folder called Docs, and this is our documentation website.', 'start': 242.659, 'duration': 6.042}, {'end': 250.262, 'text': 'It was just generated for us.', 'start': 248.881, 'duration': 1.381}, {'end': 253.183, 'text': 'And then we have no code right now, but it still will generate.', 'start': 250.422, 'duration': 2.761}, {'end': 258.625, 'text': "And if we take a look at the index HTML, it'll look like this by default.", 'start': 253.603, 'duration': 5.022}, {'end': 261.546, 'text': 'And this is the default template.', 'start': 259.904, 'duration': 1.642}, {'end': 263.407, 'text': "There's a couple other templates you can use.", 'start': 261.646, 'duration': 1.761}, {'end': 264.827, 'text': 'You can create your own templates.', 'start': 263.427, 'duration': 1.4}], 'summary': 'Using jsdoc, created a documentation website with default template.', 'duration': 50.975, 'max_score': 213.852, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YK-GurROGIg/pics/YK-GurROGIg213852.jpg'}], 'start': 7.093, 'title': 'Jsdoc documentation generator', 'summary': 'Explores jsdoc, a javascript documentation generator, covering its features, installation, configuration, and usage. it showcases creating a documentation website for code using jsdoc with node express and on the front end with react or vue, including the setup process with npm, config file creation, and website generation.', 'chapters': [{'end': 276.092, 'start': 7.093, 'title': 'Jsdoc documentation generator', 'summary': 'Explores jsdoc, a javascript documentation generator, its features, installation, configuration, and usage, showcasing the creation of a documentation website for code while using jsdoc with node express and on the front end with react or vue. the chapter highlights the process of setting up jsdoc, including installing it with npm, creating a config file, and running it to generate a documentation website.', 'duration': 268.999, 'highlights': ['The chapter explores JSDoc, a JavaScript documentation generator, its features, installation, configuration, and usage The video discusses JSDoc, a JavaScript documentation generator, highlighting its features, installation, configuration, and usage.', 'The process of setting up JSDoc, including installing it with NPM, creating a config file, and running it to generate a documentation website The chapter covers the process of setting up JSDoc, including installing it with NPM, creating a config file, and running it to generate a documentation website.', 'Showcasing the creation of a documentation website for code while using JSDoc with Node Express and on the front end with React or Vue The video showcases the creation of a documentation website for code while using JSDoc with Node Express and on the front end with React or Vue.']}], 'duration': 268.999, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YK-GurROGIg/pics/YK-GurROGIg7093.jpg', 'highlights': ['The video showcases the creation of a documentation website for code while using JSDoc with Node Express and on the front end with React or Vue', 'The process of setting up JSDoc, including installing it with NPM, creating a config file, and running it to generate a documentation website', 'The chapter explores JSDoc, a JavaScript documentation generator, its features, installation, configuration, and usage']}, {'end': 692.187, 'segs': [{'end': 325.123, 'src': 'embed', 'start': 300.836, 'weight': 1, 'content': [{'end': 307.907, 'text': 'To add a JS doc comment in VS code, we can just do slash and then two asterisks and it will automatically finish for us.', 'start': 300.836, 'duration': 7.071}, {'end': 313.575, 'text': 'And then we can hit enter and then add whatever JS doc tags we want.', 'start': 308.488, 'duration': 5.087}, {'end': 315.198, 'text': 'In this case, we want to add a type.', 'start': 313.595, 'duration': 1.603}, {'end': 318.435, 'text': 'And this is going to be a string type.', 'start': 316.352, 'duration': 2.083}, {'end': 323.541, 'text': 'We can also add a description here so we can say like student name, which is pretty obvious.', 'start': 318.795, 'duration': 4.746}, {'end': 325.123, 'text': "And that's it.", 'start': 324.482, 'duration': 0.641}], 'summary': 'In vs code, adding a js doc comment is done using slash and two asterisks, allowing for easy addition of js doc tags including type and description.', 'duration': 24.287, 'max_score': 300.836, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YK-GurROGIg/pics/YK-GurROGIg300836.jpg'}, {'end': 395.309, 'src': 'embed', 'start': 347.61, 'weight': 0, 'content': [{'end': 352.937, 'text': 'And I can actually click on the line and it will show me in my documentation that line highlighted.', 'start': 347.61, 'duration': 5.327}, {'end': 354.641, 'text': 'OK, so pretty cool.', 'start': 353.8, 'duration': 0.841}, {'end': 363.366, 'text': "And if we want this, if we want to have actual type checking, which I do have enabled, you'll see if I change this to a one,", 'start': 355.181, 'duration': 8.185}, {'end': 367.448, 'text': "I'm going to get this red squiggly line that says type one is not assignable to string.", 'start': 363.366, 'duration': 4.082}, {'end': 369.97, 'text': 'So it works kind of like TypeScript.', 'start': 368.049, 'duration': 1.921}, {'end': 372.571, 'text': "Now, by default, this isn't going to work.", 'start': 370.59, 'duration': 1.981}, {'end': 376.294, 'text': "What I what I've done is in my settings, if I go to my.", 'start': 372.772, 'duration': 3.522}, {'end': 380.681, 'text': 'settings json file right here.', 'start': 378.3, 'duration': 2.381}, {'end': 381.362, 'text': 'this is the.', 'start': 380.681, 'duration': 0.681}, {'end': 383.823, 'text': "this is what's allowing that to happen.", 'start': 381.362, 'duration': 2.461}, {'end': 387.445, 'text': 'so javascript.implicitprojectconfig.js.', 'start': 383.823, 'duration': 3.622}, {'end': 393.168, 'text': "is true, if i set that to false, or i don't have this at all, then it's not going to do that.", 'start': 387.445, 'duration': 5.723}, {'end': 395.309, 'text': "it's not going to show me that red line or anything.", 'start': 393.168, 'duration': 2.141}], 'summary': 'Visual studio code enables type checking with red squiggly lines, similar to typescript, through javascript.implicitprojectconfig.js.', 'duration': 47.699, 'max_score': 347.61, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YK-GurROGIg/pics/YK-GurROGIg347610.jpg'}, {'end': 601.187, 'src': 'embed', 'start': 580.657, 'weight': 4, 'content': [{'end': 590.339, 'text': "So if we go into node modules and then JSDoc and then templates, you'll see the default template that's used by default.", 'start': 580.657, 'duration': 9.682}, {'end': 593.96, 'text': 'And we can describe what template we want to use from within our config.', 'start': 590.699, 'duration': 3.261}, {'end': 597.144, 'text': 'But what I want to do is edit the default template.', 'start': 594.922, 'duration': 2.222}, {'end': 601.187, 'text': 'And you never want to edit something in your node modules folder, almost never.', 'start': 597.184, 'duration': 4.003}], 'summary': 'Editing default template in jsdoc node modules folder is not recommended.', 'duration': 20.53, 'max_score': 580.657, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YK-GurROGIg/pics/YK-GurROGIg580657.jpg'}], 'start': 276.152, 'title': 'Javascript documentation and type checking with jsdoc', 'summary': 'Explains how to add js doc comments in vs code to generate documentation and demonstrates enabling type checking in javascript using jsdoc, including setting up implicit project config and adding type annotations for variables, arrays, and objects.', 'chapters': [{'end': 347.57, 'start': 276.152, 'title': 'Adding js doc comments for documentation', 'summary': 'Explains how to add a js doc comment in vs code to generate documentation, including adding a variable with type checking and generating and viewing the documentation.', 'duration': 71.418, 'highlights': ['Adding a JS doc comment in VS code allows for generating documentation automatically by using JS doc tags such as type and description, enabling type checking for variables like student name with a string type.', 'Generating documentation in VS code provides information on variables, including their name, description, type, and source file and line number.', 'Adding a variable for student name with a value of John Doe and using type checking by adding a string type helps in documenting and understanding the code.']}, {'end': 692.187, 'start': 347.61, 'title': 'Javascript type checking with jsdoc', 'summary': 'Demonstrates how to enable type checking in javascript using jsdoc, including setting up implicit project config, adding type annotations for variables, arrays, and objects, and customizing jsdoc templates.', 'duration': 344.577, 'highlights': ['Enabling type checking in JavaScript with JSDoc The chapter explains how to enable type checking in JavaScript using JSDoc, which works similar to TypeScript, showcasing the ability to show type errors and red squiggly lines when types are not assignable, providing a seamless type checking experience.', 'Setting up implicit project config for type checking It is demonstrated that by setting javascript.implicitprojectconfig.js to true in the settings.json file, type errors and red squiggly lines can be shown when types are not assignable, providing a specific configuration for type checking in JavaScript.', 'Adding type annotations for arrays and objects The chapter illustrates adding type annotations for arrays and objects in JavaScript using JSDoc, exemplifying how to define types for arrays and objects, and showcasing the ability to get type errors when values do not adhere to the specified types.', 'Customizing JSDoc templates The chapter explains how to customize JSDoc templates by editing the default template, copying it to the root directory, and modifying the template files, allowing for personalized documentation outputs without directly altering the default template in the node modules folder.']}], 'duration': 416.035, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YK-GurROGIg/pics/YK-GurROGIg276152.jpg', 'highlights': ['Enabling type checking in JavaScript using JSDoc provides a seamless type checking experience similar to TypeScript.', 'Adding a JS doc comment in VS code allows for generating documentation automatically using JS doc tags such as type and description.', 'Setting up implicit project config for type checking in JavaScript by setting javascript.implicitprojectconfig.js to true in the settings.json file.', 'Adding type annotations for arrays and objects in JavaScript using JSDoc allows defining types and getting type errors when values do not adhere to the specified types.', 'Customizing JSDoc templates enables personalized documentation outputs without directly altering the default template in the node modules folder.']}, {'end': 1037.996, 'segs': [{'end': 721.539, 'src': 'embed', 'start': 692.187, 'weight': 0, 'content': [{'end': 695.208, 'text': "let's move on to functions and params.", 'start': 692.187, 'duration': 3.021}, {'end': 697.029, 'text': "so let's say we have a function.", 'start': 695.208, 'duration': 1.821}, {'end': 703.212, 'text': "i'm actually going to just, uh, just grab this real quick, All right.", 'start': 697.029, 'duration': 6.183}, {'end': 710.275, 'text': "so it's just a very simple function to calculate tax and you can use an arrow function or, you know, regular function.", 'start': 703.212, 'duration': 7.063}, {'end': 711.775, 'text': "It doesn't matter.", 'start': 710.295, 'duration': 1.48}, {'end': 713.496, 'text': "It'll still document it the same way.", 'start': 711.835, 'duration': 1.661}, {'end': 721.539, 'text': 'So it takes in an amount like 100 and then a percentage like 50 actions to like ten point one.', 'start': 713.976, 'duration': 7.563}], 'summary': 'Introduction to function parameters, demonstrating a simple tax calculation function using an example of 100 and 50%, yielding 10.1.', 'duration': 29.352, 'max_score': 692.187, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YK-GurROGIg/pics/YK-GurROGIg692187.jpg'}, {'end': 833.943, 'src': 'embed', 'start': 807.085, 'weight': 1, 'content': [{'end': 814.87, 'text': "OK, so, yeah, because I'm returning a template literal here with back ticks and I have a dollar sign in front of the amount.", 'start': 807.085, 'duration': 7.785}, {'end': 819.453, 'text': "Let's save that and let's run our documentation.", 'start': 815.531, 'duration': 3.922}, {'end': 822.215, 'text': "I'm sorry, that's not right.", 'start': 819.473, 'duration': 2.742}, {'end': 824.136, 'text': 'We want to run NPM run doc.', 'start': 822.275, 'duration': 1.861}, {'end': 828.279, 'text': "And if we take a look now over here, you'll see calculate tax.", 'start': 825.217, 'duration': 3.062}, {'end': 832.662, 'text': 'Now, these are all our members, basically our global variables.', 'start': 828.399, 'duration': 4.263}, {'end': 833.943, 'text': 'And then we have methods.', 'start': 832.822, 'duration': 1.121}], 'summary': 'Using template literals and npm run doc to document global variables and methods.', 'duration': 26.858, 'max_score': 807.085, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YK-GurROGIg/pics/YK-GurROGIg807085.jpg'}, {'end': 884.479, 'src': 'embed', 'start': 856.024, 'weight': 2, 'content': [{'end': 861.686, 'text': "if you're working with someone else's code, this really helps see what everything is what it does.", 'start': 856.024, 'duration': 5.662}, {'end': 865.607, 'text': "So, I mean, it can be really helpful when you're collaborating with other people.", 'start': 862.146, 'duration': 3.461}, {'end': 872.87, 'text': 'So next thing I want to show you is how to create custom types, something called the type def or type definition.', 'start': 866.908, 'duration': 5.962}, {'end': 876.733, 'text': "So let's say we want to create a a type called student.", 'start': 873.51, 'duration': 3.223}, {'end': 884.479, 'text': "So let's go down here and let's say inside our JSTOCK, we'll say a student.", 'start': 877.474, 'duration': 7.005}], 'summary': 'Learn how to create custom types and collaborate effectively on code.', 'duration': 28.455, 'max_score': 856.024, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YK-GurROGIg/pics/YK-GurROGIg856024.jpg'}], 'start': 692.187, 'title': 'Javascript functions, parameters, and custom type definition', 'summary': 'Covers the concept of functions and parameters in javascript, demonstrating a simple tax calculation function resulting in 110 dollars. it also explains documenting a calculate tax function, custom type creation using jsdoc, and the usefulness of custom types in ensuring data type integrity and collaboration.', 'chapters': [{'end': 740.225, 'start': 692.187, 'title': 'Functions and parameters', 'summary': 'Introduces the concept of functions and parameters in javascript, demonstrating the use of a simple function to calculate tax with an example of taking in an amount and a percentage, resulting in 110 dollars when run.', 'duration': 48.038, 'highlights': ['The chapter covers the concept of functions and parameters in JavaScript, using a simple example to calculate tax, taking in an amount like 100 and a percentage like 50, resulting in 110 dollars when run.', 'The example demonstrates the use of both arrow functions and regular functions to achieve the same result, emphasizing that the documentation process remains consistent regardless of the function type.']}, {'end': 856.024, 'start': 741.725, 'title': 'Documentation for calculate tax function', 'summary': 'Covers the process of documenting a calculate tax function, including adding parameters, specifying return type, and generating documentation using npm run doc.', 'duration': 114.299, 'highlights': ['The chapter covers the process of documenting a calculate tax function, including adding parameters, specifying return type, and generating documentation using NPM run doc.', "The function description is 'calculate tax' with the parameters 'total amounts' and 'tax percentage'.", 'The function returns a string with the total amount formatted with a dollar sign.']}, {'end': 1037.996, 'start': 856.024, 'title': 'Creating custom types with type definition', 'summary': "Explains how to create custom types using type definition in jsdoc, showcasing the process of defining a 'student' type with properties like id, name, age, and is active, while emphasizing its usefulness in collaborating with others and ensuring data type integrity.", 'duration': 181.972, 'highlights': ["The chapter explains how to create custom types using type definition in JSDoc Demonstrates the process of defining a 'student' type with properties like ID, name, age, and is active in JSDoc.", 'Emphasizes the usefulness in collaborating with others Highlights the utility of creating custom types in facilitating collaboration with others while working on code.', "Showcases the process of defining a 'student' type with properties like ID, name, age, and is active Illustrates the step-by-step process of defining a custom type 'student' with specific properties in JSDoc.", 'Ensuring data type integrity Underlines the significance of maintaining data type integrity through the use of custom types and type definition in JSDoc.']}], 'duration': 345.809, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YK-GurROGIg/pics/YK-GurROGIg692187.jpg', 'highlights': ['The chapter covers the concept of functions and parameters in JavaScript, using a simple example to calculate tax, resulting in 110 dollars when run.', 'The chapter covers the process of documenting a calculate tax function, including adding parameters, specifying return type, and generating documentation using NPM run doc.', 'The chapter explains how to create custom types using type definition in JSDoc, emphasizing the usefulness in collaborating with others and ensuring data type integrity.']}, {'end': 1661.348, 'segs': [{'end': 1119.328, 'src': 'embed', 'start': 1062.495, 'weight': 2, 'content': [{'end': 1064.956, 'text': 'So student name is the member right here.', 'start': 1062.495, 'duration': 2.461}, {'end': 1066.777, 'text': 'And if we look at the type.', 'start': 1065.596, 'duration': 1.181}, {'end': 1068.638, 'text': 'Well, I guess.', 'start': 1068.177, 'duration': 0.461}, {'end': 1071.439, 'text': "Oh, wait, no, it's not student name student.", 'start': 1068.898, 'duration': 2.541}, {'end': 1076.882, 'text': 'This right here, student, and it has the type of student.', 'start': 1072.56, 'duration': 4.322}, {'end': 1078.443, 'text': 'OK, see that.', 'start': 1077.842, 'duration': 0.601}, {'end': 1079.603, 'text': 'And then if we go down.', 'start': 1078.563, 'duration': 1.04}, {'end': 1082.685, 'text': 'Actually, wait a minute.', 'start': 1079.623, 'duration': 3.062}, {'end': 1085.283, 'text': 'All right.', 'start': 1084.983, 'duration': 0.3}, {'end': 1087.165, 'text': "It's right in front of my eyes.", 'start': 1085.363, 'duration': 1.802}, {'end': 1088.086, 'text': 'Type definition.', 'start': 1087.225, 'duration': 0.861}, {'end': 1090.828, 'text': 'So we have a student type.', 'start': 1088.766, 'duration': 2.062}, {'end': 1093.11, 'text': "Ultimately, it's an object.", 'start': 1091.849, 'duration': 1.261}, {'end': 1099.436, 'text': 'But our properties here, ID, number, and you can have attributes as well.', 'start': 1093.511, 'duration': 5.925}, {'end': 1104.721, 'text': 'So ID, name, age, which is optional, is active.', 'start': 1099.876, 'duration': 4.845}, {'end': 1110.426, 'text': "And then if we want to locate that type def, it'll take us to that in our documentation.", 'start': 1105.381, 'duration': 5.045}, {'end': 1119.328, 'text': "So now what I want to do is give you an example of a class, because up to this point, we've been just kind of working in the like the global scope.", 'start': 1111.141, 'duration': 8.187}], 'summary': 'The transcript discusses defining a student type with properties like id, name, age, and activity, and providing an example of a class within a specific scope.', 'duration': 56.833, 'max_score': 1062.495, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YK-GurROGIg/pics/YK-GurROGIg1062495.jpg'}, {'end': 1364.968, 'src': 'embed', 'start': 1339.001, 'weight': 0, 'content': [{'end': 1343.443, 'text': 'We only have one method called greet, and we can go to it here if we want.', 'start': 1339.001, 'duration': 4.442}, {'end': 1346.744, 'text': 'And I just want to show you a real quick link.', 'start': 1344.023, 'duration': 2.721}, {'end': 1351.745, 'text': "So let's say we have let's just initialize a person here.", 'start': 1347.264, 'duration': 4.481}, {'end': 1356.186, 'text': "So we'll say we'll call this person one, set it to new person.", 'start': 1351.825, 'duration': 4.361}, {'end': 1358.406, 'text': "OK, so we're just using our person class.", 'start': 1356.206, 'duration': 2.2}, {'end': 1364.968, 'text': 'And remember, it takes in an object with a name and an age.', 'start': 1358.946, 'duration': 6.022}], 'summary': 'Demonstration of using the greet method and initializing a person object.', 'duration': 25.967, 'max_score': 1339.001, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YK-GurROGIg/pics/YK-GurROGIg1339001.jpg'}, {'end': 1461.371, 'src': 'embed', 'start': 1433.969, 'weight': 3, 'content': [{'end': 1437.212, 'text': "So if I click on that, it'll actually take me to the class.", 'start': 1433.969, 'duration': 3.243}, {'end': 1443.962, 'text': 'So you can link to other parts of the documentation you know, from certain parts, which is pretty cool.', 'start': 1437.692, 'duration': 6.27}, {'end': 1445.546, 'text': 'All right.', 'start': 1445.265, 'duration': 0.281}, {'end': 1446.929, 'text': "I'll probably just get rid of that.", 'start': 1445.847, 'duration': 1.082}, {'end': 1451.606, 'text': "So.. Let's see what I want to do next.", 'start': 1448.313, 'duration': 3.293}, {'end': 1452.647, 'text': "Let's do modules.", 'start': 1451.646, 'duration': 1.001}, {'end': 1455.088, 'text': 'So a lot of times you might have separate modules.', 'start': 1452.787, 'duration': 2.301}, {'end': 1461.371, 'text': "And this works with both CommonJS, which is when you're working in Node.js, and you use the require syntax,", 'start': 1455.148, 'duration': 6.223}], 'summary': 'Demonstrating linking to documentation and using separate modules for both commonjs and node.js.', 'duration': 27.402, 'max_score': 1433.969, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YK-GurROGIg/pics/YK-GurROGIg1433969.jpg'}, {'end': 1565.727, 'src': 'embed', 'start': 1537.789, 'weight': 1, 'content': [{'end': 1540.11, 'text': "So I'm going to use the common JS syntax.", 'start': 1537.789, 'duration': 2.321}, {'end': 1547.632, 'text': "So we'll say const and then we'll just bring in we'll use destructuring to bring in all the methods from.", 'start': 1540.59, 'duration': 7.042}, {'end': 1558.004, 'text': "Calculator Or actually, I'm sorry, we need to do dot slash calculator.", 'start': 1551.193, 'duration': 6.811}, {'end': 1565.727, 'text': 'OK, so we can bring in, you know, add, subtract, divide and multiply.', 'start': 1558.464, 'duration': 7.263}], 'summary': 'Using common js syntax to bring in methods from a calculator using destructuring.', 'duration': 27.938, 'max_score': 1537.789, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YK-GurROGIg/pics/YK-GurROGIg1537789.jpg'}, {'end': 1637.08, 'src': 'embed', 'start': 1607.276, 'weight': 4, 'content': [{'end': 1610.579, 'text': "OK, so over here now you'll see we have modules.", 'start': 1607.276, 'duration': 3.303}, {'end': 1617.806, 'text': "So for every module you create, whether it's ES 2015 or CommonJS, it'll show the module here.", 'start': 1610.899, 'duration': 6.907}, {'end': 1621.429, 'text': 'And if I click on it, we get all the information about that module.', 'start': 1617.826, 'duration': 3.603}, {'end': 1628.295, 'text': 'So the description, the source, all the methods along with their parameters.', 'start': 1622.01, 'duration': 6.285}, {'end': 1630.678, 'text': 'OK, so you can see, you know, number.', 'start': 1628.315, 'duration': 2.363}, {'end': 1637.08, 'text': 'N1, N2, first number, second number, and it just basically documents that module.', 'start': 1631.638, 'duration': 5.442}], 'summary': 'Demonstration of module creation and documentation, including methods and parameters.', 'duration': 29.804, 'max_score': 1607.276, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YK-GurROGIg/pics/YK-GurROGIg1607276.jpg'}], 'start': 1038.056, 'title': 'Typescript type definition and javascript class creation', 'summary': 'Delves into type definition in typescript with an example of a student type, and demonstrates the creation of a person class and a module for common js in javascript, with emphasis on type checking and documentation.', 'chapters': [{'end': 1119.328, 'start': 1038.056, 'title': 'Type definition and class example', 'summary': 'Discusses type definition in typescript, exemplifying a student type with properties like id, name, age, and is active, and later introduces an example of a class in the context of type checking and documentation generation.', 'duration': 81.272, 'highlights': ['The transcript explains type definition in TypeScript, showcasing a student type with properties such as ID, name, age, and is active.', 'It mentions the process of generating documentation for the defined type with the ability to navigate to the type definition within the documentation.', 'The chapter then introduces an example of a class, contributing to the understanding of type checking and its application in the global scope.']}, {'end': 1661.348, 'start': 1119.488, 'title': 'Creating classes and modules in javascript', 'summary': 'Covers creating a person class with a constructor and a method for greeting, along with documenting it using js doc. it also explains creating a module for common js with methods like add, multiply, subtract, and divide, and documenting it.', 'duration': 541.86, 'highlights': ['The chapter covers creating a person class with a constructor and a method for greeting. Demonstrates creating a class with a constructor and a method, providing a practical example for understanding.', 'Explains creating a module for common JS with methods like add, multiply, subtract, and divide. Illustrates creating a separate module with various methods using JS doc for documentation.', 'Shows how to document the created class and module using JS doc, generating a detailed documentation file. Emphasizes the importance of documenting classes and modules using JS doc, showcasing the generation of detailed documentation files.']}], 'duration': 623.292, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YK-GurROGIg/pics/YK-GurROGIg1038056.jpg', 'highlights': ['The chapter covers creating a person class with a constructor and a method for greeting.', 'Explains creating a module for common JS with methods like add, multiply, subtract, and divide.', 'The transcript explains type definition in TypeScript, showcasing a student type with properties such as ID, name, age, and is active.', 'Mentions the process of generating documentation for the defined type with the ability to navigate to the type definition within the documentation.', 'Shows how to document the created class and module using JS doc, generating a detailed documentation file.', 'The chapter then introduces an example of a class, contributing to the understanding of type checking and its application in the global scope.']}, {'end': 1949.05, 'segs': [{'end': 1698.002, 'src': 'embed', 'start': 1661.569, 'weight': 0, 'content': [{'end': 1664.09, 'text': "My job isn't to try to convince you to use it.", 'start': 1661.569, 'duration': 2.521}, {'end': 1669.114, 'text': "It's to just show it to you, and then you take it upon yourself if you want to use it or not.", 'start': 1664.21, 'duration': 4.904}, {'end': 1671.135, 'text': "All right, so let's see.", 'start': 1669.854, 'duration': 1.281}, {'end': 1678.98, 'text': "What else do I want to show you guys? Let's look at tutorials because you can actually add tutorials to your documentation.", 'start': 1671.155, 'duration': 7.825}, {'end': 1688.126, 'text': 'So what we can do is go to our jsdoc.json, and from here we can add tutorials.', 'start': 1679.74, 'duration': 8.386}, {'end': 1698.002, 'text': 'tutorials, and then we can have a folder where we want to display our tutorials, which is going to be tutorials.', 'start': 1690.74, 'duration': 7.262}], 'summary': 'Demonstrating how to add tutorials to documentation using jsdoc.json.', 'duration': 36.433, 'max_score': 1661.569, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YK-GurROGIg/pics/YK-GurROGIg1661569.jpg'}, {'end': 1869.941, 'src': 'embed', 'start': 1755.515, 'weight': 1, 'content': [{'end': 1765.539, 'text': "So this one, let's say, uh, calculator tutorial, and this would, let's, let's make this one mark down just to show you.", 'start': 1755.515, 'duration': 10.024}, {'end': 1766.859, 'text': "So I'll do dot MD.", 'start': 1765.599, 'duration': 1.26}, {'end': 1773.122, 'text': "Um, and then I'll just put in, I'm just going to paste in a bunch of text here as well.", 'start': 1767.8, 'duration': 5.322}, {'end': 1777.509, 'text': 'And obviously, you can use all kinds of markdown.', 'start': 1775.168, 'duration': 2.341}, {'end': 1779.75, 'text': 'So we have two tutorials.', 'start': 1778.309, 'duration': 1.441}, {'end': 1782.291, 'text': "Now I'm going to go ahead and generate my docs.", 'start': 1780.37, 'duration': 1.921}, {'end': 1784.692, 'text': "And let's take a look.", 'start': 1783.752, 'duration': 0.94}, {'end': 1786.793, 'text': 'And now we have tutorials.', 'start': 1784.852, 'duration': 1.941}, {'end': 1790.375, 'text': 'We have our calculated tutorial, our program tutorial.', 'start': 1787.373, 'duration': 3.002}, {'end': 1793.296, 'text': "Now this doesn't look too good, this title here.", 'start': 1790.975, 'duration': 2.321}, {'end': 1797.178, 'text': "It's basically just going to use the name of the file by default.", 'start': 1793.856, 'duration': 3.322}, {'end': 1807.777, 'text': 'But what we can do is inside of the tutorials folder, we can create a file called tutorials dot Jason.', 'start': 1798.092, 'duration': 9.685}, {'end': 1813.679, 'text': "And in here, let's go ahead and open up some curly braces and we can put.", 'start': 1809.597, 'duration': 4.082}, {'end': 1818.342, 'text': 'Program basically the name of the file tutorial.', 'start': 1815.38, 'duration': 2.962}, {'end': 1822.744, 'text': 'And set that to an object, and then we can have title.', 'start': 1820.162, 'duration': 2.582}, {'end': 1854.868, 'text': 'program title say calculator tutorial and set that to have title All right, so save that and generate the doc again and check it out.', 'start': 1827.082, 'duration': 27.786}, {'end': 1859.153, 'text': 'And look at that program title calculator.', 'start': 1855.308, 'duration': 3.845}, {'end': 1861.976, 'text': 'We put program title.', 'start': 1859.914, 'duration': 2.062}, {'end': 1865.961, 'text': 'It should be program tutorial.', 'start': 1863.198, 'duration': 2.763}, {'end': 1869.021, 'text': 'or whatever you want.', 'start': 1868.16, 'duration': 0.861}, {'end': 1869.941, 'text': "It doesn't really matter.", 'start': 1869.161, 'duration': 0.78}], 'summary': 'Generated tutorials for calculator and program, updated title to program tutorial', 'duration': 114.426, 'max_score': 1755.515, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YK-GurROGIg/pics/YK-GurROGIg1755515.jpg'}, {'end': 1949.05, 'src': 'embed', 'start': 1896.699, 'weight': 4, 'content': [{'end': 1910.206, 'text': 'C and we can actually open up some curly braces and we can put at tutorial and then we can point to the calculator dash tutorial.', 'start': 1896.699, 'duration': 13.507}, {'end': 1914.426, 'text': "And now I'm going to generate the docs, go back.", 'start': 1911.604, 'duration': 2.822}, {'end': 1924.134, 'text': 'And now if I go and I look at my calculator module, you can see right here, see calculator tutorial and it will point me to that tutorial.', 'start': 1915.407, 'duration': 8.727}, {'end': 1925.415, 'text': 'All right.', 'start': 1925.115, 'duration': 0.3}, {'end': 1928.277, 'text': 'So obviously, you know, this is just a mess of code.', 'start': 1925.595, 'duration': 2.682}, {'end': 1928.998, 'text': "It's not.", 'start': 1928.317, 'duration': 0.681}, {'end': 1936.084, 'text': "it's not an actual program or anything, but you can really structure this to make a lot of sense and really help.", 'start': 1928.998, 'duration': 7.086}, {'end': 1939.265, 'text': 'you know other people out as well as yourself.', 'start': 1936.624, 'duration': 2.641}, {'end': 1945.148, 'text': "A lot of times we write code, we don't look at it for a few months, and then we go back and we're like what the hell does this even do?", 'start': 1939.305, 'duration': 5.843}, {'end': 1949.05, 'text': 'You know, so this will document everything for you, which is really cool.', 'start': 1945.628, 'duration': 3.422}], 'summary': 'Documenting code with tutorials can aid understanding and collaboration.', 'duration': 52.351, 'max_score': 1896.699, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YK-GurROGIg/pics/YK-GurROGIg1896699.jpg'}], 'start': 1661.569, 'title': 'Using tutorials in documentation', 'summary': 'Discusses adding tutorials in html or markdown format, integrating them into documentation, and customizing program tutorials using a json file to personalize tutorial content. it also highlights documenting code with j.s. calculator for code documentation and understanding.', 'chapters': [{'end': 1784.692, 'start': 1661.569, 'title': 'Using tutorials in documentation', 'summary': 'Discusses the process of adding tutorials to documentation, demonstrating how to create tutorials in html or markdown format and integrate them into the documentation, emphasizing the flexibility of using different formats and highlighting the creation of two tutorials.', 'duration': 123.123, 'highlights': ['The process of adding tutorials to documentation is demonstrated, showcasing the flexibility of using different formats such as html or markdown.', "Creation of two tutorials, 'program tutorial' in html and 'calculator tutorial' in markdown, is highlighted."]}, {'end': 1869.941, 'start': 1784.852, 'title': 'Customizing program tutorials', 'summary': "Introduces customizing program tutorials by creating a json file, allowing users to set specific titles for tutorials, enabling them to personalize tutorial content. it also highlights the ability to customize tutorial titles, providing an example of changing the program title to 'calculator tutorial'.", 'duration': 85.089, 'highlights': ['Users can customize program tutorials by creating a JSON file to set specific titles for tutorials.', "The tutorial demonstrates changing the program title to 'calculator tutorial' as an example of customization.", 'The chapter emphasizes the flexibility of customizing tutorial titles to suit user preferences.']}, {'end': 1949.05, 'start': 1870.241, 'title': 'Documenting code with j.s. calculator', 'summary': 'Discusses using j.s. to point to a tutorial in a calculator module, aiming to aid in code documentation and understanding, benefiting both developers and readers.', 'duration': 78.809, 'highlights': ['Using J.S. to point to a tutorial in a calculator module aids in code documentation and understanding, benefiting both developers and readers.', 'Documenting code with J.S. can help in understanding and structuring the code, benefiting both developers and readers.', 'Code documentation with J.S. can prevent confusion and aid in understanding code after a period of not working on it.']}], 'duration': 287.481, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YK-GurROGIg/pics/YK-GurROGIg1661569.jpg', 'highlights': ['The process of adding tutorials to documentation is demonstrated, showcasing the flexibility of using different formats such as html or markdown.', "Creation of two tutorials, 'program tutorial' in html and 'calculator tutorial' in markdown, is highlighted.", 'Users can customize program tutorials by creating a JSON file to set specific titles for tutorials.', "The tutorial demonstrates changing the program title to 'calculator tutorial' as an example of customization.", 'Using J.S. to point to a tutorial in a calculator module aids in code documentation and understanding, benefiting both developers and readers.', 'Documenting code with J.S. can help in understanding and structuring the code, benefiting both developers and readers.', 'Code documentation with J.S. can prevent confusion and aid in understanding code after a period of not working on it.']}, {'end': 2190.567, 'segs': [{'end': 2002.965, 'src': 'embed', 'start': 1949.47, 'weight': 0, 'content': [{'end': 1953.753, 'text': "In addition to that, it'll give you some type checking functionality.", 'start': 1949.47, 'duration': 4.283}, {'end': 1955.233, 'text': 'All right.', 'start': 1954.893, 'duration': 0.34}, {'end': 1957.815, 'text': "So I think we're just about done here.", 'start': 1955.433, 'duration': 2.382}, {'end': 1961.097, 'text': "Let's go back to the home now for this area here.", 'start': 1957.875, 'duration': 3.222}, {'end': 1963.218, 'text': "There's a few things we can do.", 'start': 1961.117, 'duration': 2.101}, {'end': 1964.659, 'text': 'We can actually add in.', 'start': 1963.279, 'duration': 1.38}, {'end': 1968.882, 'text': "Let's go back to index.js and I'll have this code in the description.", 'start': 1964.679, 'duration': 4.203}, {'end': 1970.363, 'text': "I'm not sure what I'm going to put it in.", 'start': 1968.922, 'duration': 1.441}, {'end': 1975.867, 'text': "It might be a GitHub repo or it might be, I don't know, like a plunker or something.", 'start': 1970.383, 'duration': 5.484}, {'end': 1978.468, 'text': "But here let's add.", 'start': 1976.687, 'duration': 1.781}, {'end': 1980.55, 'text': "See, we'll go.", 'start': 1979.709, 'duration': 0.841}, {'end': 1983.057, 'text': 'Right here.', 'start': 1982.577, 'duration': 0.48}, {'end': 1987.379, 'text': 'And we can actually put in some JS stock and we can use that file.', 'start': 1983.257, 'duration': 4.122}, {'end': 1992.921, 'text': "And this is this so many of these tags that I'm not going to go over that you can check out in the documentation.", 'start': 1987.619, 'duration': 5.302}, {'end': 2002.965, 'text': "But let's just say index.js is the root file for this example app.", 'start': 1993.521, 'duration': 9.444}], 'summary': 'The transcript discusses adding type checking functionality and modifying code in index.js for an example app.', 'duration': 53.495, 'max_score': 1949.47, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YK-GurROGIg/pics/YK-GurROGIg1949470.jpg'}, {'end': 2167.487, 'src': 'embed', 'start': 2131.49, 'weight': 3, 'content': [{'end': 2132.391, 'text': "And there's a lot more.", 'start': 2131.49, 'duration': 0.901}, {'end': 2136.936, 'text': "I'm just getting into kind of the fundamentals of JSDoc.", 'start': 2132.431, 'duration': 4.505}, {'end': 2144.612, 'text': "Now, if you're really interested in JSDoc and you want to start using it, what I would do is I'm actually going to assign you some homework.", 'start': 2137.867, 'duration': 6.745}, {'end': 2148.134, 'text': "So take something you've already built, some kind of JavaScript program.", 'start': 2144.712, 'duration': 3.422}, {'end': 2149.215, 'text': 'It could be something tiny.', 'start': 2148.154, 'duration': 1.061}, {'end': 2153.157, 'text': "It could have been a tutorial that you followed on my channel or someone else's.", 'start': 2149.235, 'duration': 3.922}, {'end': 2154.878, 'text': 'It could be a large project.', 'start': 2153.578, 'duration': 1.3}, {'end': 2157.14, 'text': 'And implement JSDoc into it.', 'start': 2155.299, 'duration': 1.841}, {'end': 2157.86, 'text': 'Install it.', 'start': 2157.24, 'duration': 0.62}, {'end': 2167.487, 'text': 'Set up the config file and add your JSDoc comments where you want and create some documentation.', 'start': 2158.221, 'duration': 9.266}], 'summary': 'Introduction to jsdoc, recommended homework: implement jsdoc into a javascript program and create documentation.', 'duration': 35.997, 'max_score': 2131.49, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YK-GurROGIg/pics/YK-GurROGIg2131490.jpg'}], 'start': 1949.47, 'title': 'Javascript type checking and file usage, and introduction to jsdoc', 'summary': 'Covers javascript type checking and file usage, focusing on index.js as the root file, and introduces jsdoc, with examples and a homework assignment for implementation.', 'chapters': [{'end': 2002.965, 'start': 1949.47, 'title': 'Javascript type checking and file usage', 'summary': 'Introduces javascript type checking functionality and file usage, with emphasis on index.js as the root file for an example app.', 'duration': 53.495, 'highlights': ['The chapter introduces JavaScript type checking functionality and file usage.', 'index.js is the root file for this example app.', 'The chapter emphasizes using JS stock and adding code to index.js.']}, {'end': 2190.567, 'start': 2004.806, 'title': 'Introduction to jsdoc', 'summary': 'Introduces jsdoc, demonstrating how to create documentation with examples and encourages the audience to implement jsdoc into their javascript programs as a homework assignment.', 'duration': 185.761, 'highlights': ['The chapter demonstrates how to create documentation using JSDoc with examples of adding author, source, and website information. The demonstration includes adding author, source, and website information to the documentation using JSDoc.', 'The chapter encourages the audience to implement JSDoc into their JavaScript programs as a homework assignment. The audience is encouraged to implement JSDoc into their JavaScript programs as a homework assignment to create some documentation.', 'The chapter advises the audience to dive in and implement JSDoc into their existing JavaScript programs to generate documentation. The audience is advised to implement JSDoc into their existing JavaScript programs and generate documentation as a way to learn effectively.']}], 'duration': 241.097, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/YK-GurROGIg/pics/YK-GurROGIg1949470.jpg', 'highlights': ['The chapter introduces JavaScript type checking functionality and file usage.', 'index.js is the root file for this example app.', 'The chapter emphasizes using JS stock and adding code to index.js.', 'The chapter demonstrates how to create documentation using JSDoc with examples of adding author, source, and website information.', 'The chapter encourages the audience to implement JSDoc into their JavaScript programs as a homework assignment.', 'The chapter advises the audience to dive in and implement JSDoc into their existing JavaScript programs to generate documentation.']}], 'highlights': ['The video showcases the creation of a documentation website for code while using JSDoc with Node Express and on the front end with React or Vue', 'Enabling type checking in JavaScript using JSDoc provides a seamless type checking experience similar to TypeScript', 'The chapter covers the concept of functions and parameters in JavaScript, using a simple example to calculate tax, resulting in 110 dollars when run', 'The chapter covers creating a person class with a constructor and a method for greeting', 'The process of adding tutorials to documentation is demonstrated, showcasing the flexibility of using different formats such as html or markdown', 'The chapter introduces JavaScript type checking functionality and file usage']}