title
Visual Studio Code Crash Course

description
Visual Studio Code (VS Code) is a free code editor made by Microsoft. In this course you will learn how to use this popular code editor. You will also learn tips and tricks to make it even easier to use. ✏️ This course was created by James Q Quick. Check out his channel: https://www.youtube.com/c/jamesqquick 🔗 VS Code cheat sheet: https://learn.jamesqquick.com/vs-code-cheat-sheet ⭐️ Course Contents ⭐️ ⌨️ (0:00:00) Intro ⌨️ (0:03:30) stable build vs insider's addition ⌨️ (0:04:45) Opening for the First time ⌨️ (0:06:10) The Layout ⌨️ (0:08:58) Customizing the Layout with Shortcuts (Grid Tab System, Command Pallette) ⌨️ (0:14:06) Search and Replace ⌨️ (0:16:00) More Shortcuts for Working with Files ⌨️ (0:17:45) Shortcuts for Navigating and Editing Text ⌨️ (0:20:12) Intellisense ⌨️ (0:22:00) Emmet ⌨️ (0:25:30) Settings ⌨️ (0:31:00) Extensions and Themes ⌨️ (0:43:25) Keyboard Shortcuts ⌨️ (0:49:30) Keymap Extensions ⌨️ (0:50:40) Snippets ⌨️ (0:60:00) Settings Sync ⌨️ (0:65:40) Debugging ⌨️ (1:12:30) Built in Terminal ⌨️ (1:18:45) Source Control Integration ⌨️ (1:28:48) Wrap Up  -- Learn to code for free and get a developer job: https://www.freecodecamp.org Read hundreds of articles on programming: https://freecodecamp.org/news

detail
{'title': 'Visual Studio Code Crash Course', 'heatmap': [{'end': 3951.294, 'start': 3887.486, 'weight': 1}], 'summary': "The 'visual studio code crash course' provides a comprehensive overview of visual studio code, including its significance in web development, features of vs code insiders edition, tips and shortcuts, leveraging emmet, essential extensions for web development, customizing shortcuts and snippets, setting sync and debugging capabilities, and benefits of using the built-in terminal and extensions, offering valuable insights for maximizing productivity and efficiency in development.", 'chapters': [{'end': 245.379, 'segs': [{'end': 27.867, 'src': 'embed', 'start': 0.269, 'weight': 0, 'content': [{'end': 5.372, 'text': 'Hello and welcome to this Visual Studio Code VS code crash course,', 'start': 0.269, 'duration': 5.103}, {'end': 12.557, 'text': 'where you are going to learn all the ins and outs of the best and most popular and most powerful editor for web development.', 'start': 5.372, 'duration': 7.185}, {'end': 19.401, 'text': 'My name is James Q quick and I run a YouTube channel at James Q quick on YouTube where I do web development tutorials every week.', 'start': 12.937, 'duration': 6.464}, {'end': 21.623, 'text': "so you can go and check that out if you're interested.", 'start': 19.401, 'duration': 2.222}, {'end': 27.867, 'text': "In the meantime, let's go ahead and get started breaking down all of the ins and outs of VS code in this crash course.", 'start': 22.083, 'duration': 5.784}], 'summary': 'Visual studio code crash course by james q quick on youtube.', 'duration': 27.598, 'max_score': 0.269, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/WPqXP_kLzpo/pics/WPqXP_kLzpo269.jpg'}, {'end': 114.826, 'src': 'embed', 'start': 82.174, 'weight': 4, 'content': [{'end': 86.917, 'text': "because it's automatically detecting which operating system I'm currently on.", 'start': 82.174, 'duration': 4.743}, {'end': 94.779, 'text': "Now some of the cool behind the scenes stuff of why that's possible is VS code is actually built with something called electron j s.", 'start': 87.637, 'duration': 7.142}, {'end': 103.282, 'text': 'So electron j s allows you to build desktop applications using web technologies, JavaScript, HTML and CSS, which is really, really neat.', 'start': 94.779, 'duration': 8.503}, {'end': 104.682, 'text': 'So VS code, I think,', 'start': 103.762, 'duration': 0.92}, {'end': 114.826, 'text': "is one of the best examples of how you can build a really powerful and really performant application that can do a lot of things that you'll learn more about here in a few minutes with your basic web technology.", 'start': 104.682, 'duration': 10.144}], 'summary': 'Vs code is built with electron js, enabling it to detect os and perform well using web technologies.', 'duration': 32.652, 'max_score': 82.174, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/WPqXP_kLzpo/pics/WPqXP_kLzpo82174.jpg'}, {'end': 151.282, 'src': 'embed', 'start': 123.522, 'weight': 1, 'content': [{'end': 126.405, 'text': 'you can download VS code and you can start working with it from there.', 'start': 123.522, 'duration': 2.883}, {'end': 136.633, 'text': "So I kind of mentioned VS code is, I would say, the most popular text editor in web development, which means it's great for doing HTML, CSS,", 'start': 127.906, 'duration': 8.727}, {'end': 142.418, 'text': 'JavaScript, doing react or node or PHP or Python things like that.', 'start': 136.633, 'duration': 5.785}, {'end': 146.08, 'text': 'But it can do a lot more than just those languages it can.', 'start': 142.918, 'duration': 3.162}, {'end': 151.282, 'text': 'it can work with Java, it can work with C sharp, it can work with dotnet core, it can work with markdown.', 'start': 146.08, 'duration': 5.202}], 'summary': 'Vs code is the most popular text editor for web development, supporting various languages like html, css, javascript, react, node, php, python, java, c#, dotnet core, and markdown.', 'duration': 27.76, 'max_score': 123.522, 'thumbnail': ''}, {'end': 200.411, 'src': 'embed', 'start': 178.536, 'weight': 2, 'content': [{'end': 188.222, 'text': "We'll take a quick look at some of the built in Git features being able to work with source control locally with Git and then work with GitHub and other things like Bitbucket and things like that.", 'start': 178.536, 'duration': 9.686}, {'end': 195.987, 'text': 'And then the extension ecosystem, the things that you can add to VS Code to just make it more powerful is really the beauty of this thing.', 'start': 188.822, 'duration': 7.165}, {'end': 200.411, 'text': "So you've got some testimonials in here, you can scroll down and kind of read some more of this.", 'start': 196.767, 'duration': 3.644}], 'summary': 'Overview of git features and vs code extension ecosystem.', 'duration': 21.875, 'max_score': 178.536, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/WPqXP_kLzpo/pics/WPqXP_kLzpo178536.jpg'}], 'start': 0.269, 'title': 'Visual studio code', 'summary': 'Covers a crash course on visual studio code, emphasizing its significance in web development and introducing the instructor, james q quick, a youtuber with weekly web development tutorials. it also provides an overview of visual studio code, highlighting its popularity, versatility, as a cross-platform lightweight text editor with diverse language support and powerful features like intellisense, debugging, and git integration.', 'chapters': [{'end': 35.883, 'start': 0.269, 'title': 'Vs code crash course', 'summary': "Introduces a crash course on visual studio code, highlighting its importance in web development and the instructor's background, james q quick, a youtuber with weekly web development tutorials.", 'duration': 35.614, 'highlights': ['James Q quick, a YouTuber, will be teaching a crash course on Visual Studio Code, the most popular and powerful editor for web development.', "The chapter covers the introduction to Visual Studio Code, highlighting its significance in web development and the instructor's background as a YouTuber providing weekly web development tutorials."]}, {'end': 245.379, 'start': 36.003, 'title': 'Visual studio code overview', 'summary': 'Discusses the popularity and versatility of visual studio code as a cross-platform lightweight text editor, built with electron js, allowing for diverse language support and powerful features such as intellisense, debugging, and git integration.', 'duration': 209.376, 'highlights': ['Visual Studio Code is a popular and powerful text editor in web development, especially for HTML, CSS, JavaScript, React, Node, PHP, Python, Java, C sharp, dotnet core, and markdown. It supports a wide range of languages and technologies, making it versatile for various web development tasks.', 'VS Code is cross-platform, running on Mac, Windows, and Linux, built with electron js which allows building desktop applications using web technologies. Its cross-platform nature and the use of electron js enable it to run on different operating systems and utilize web technologies such as JavaScript, HTML, and CSS.', 'VS Code offers powerful features like IntelliSense, debugging, and built-in Git features, with the ability to add extensions for additional functionalities. It provides features like IntelliSense, debugging, and Git integration, and the flexibility to enhance its capabilities through extensions.']}], 'duration': 245.11, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/WPqXP_kLzpo/pics/WPqXP_kLzpo269.jpg', 'highlights': ['James Q quick, a YouTuber, will be teaching a crash course on Visual Studio Code, the most popular and powerful editor for web development.', 'Visual Studio Code is a popular and powerful text editor in web development, especially for HTML, CSS, JavaScript, React, Node, PHP, Python, Java, C sharp, dotnet core, and markdown. It supports a wide range of languages and technologies, making it versatile for various web development tasks.', 'VS Code offers powerful features like IntelliSense, debugging, and built-in Git features, with the ability to add extensions for additional functionalities.', "The chapter covers the introduction to Visual Studio Code, highlighting its significance in web development and the instructor's background as a YouTuber providing weekly web development tutorials.", 'VS Code is cross-platform, running on Mac, Windows, and Linux, built with electron js which allows building desktop applications using web technologies. Its cross-platform nature and the use of electron js enable it to run on different operating systems and utilize web technologies such as JavaScript, HTML, and CSS.']}, {'end': 725.307, 'segs': [{'end': 313.876, 'src': 'embed', 'start': 281.155, 'weight': 0, 'content': [{'end': 283.597, 'text': "And then when you open it, you'll see kind of a welcome screen.", 'start': 281.155, 'duration': 2.442}, {'end': 286.339, 'text': 'So let me go ahead and open up VS code on mine.', 'start': 283.617, 'duration': 2.722}, {'end': 289.122, 'text': "And you'll see how quickly this loads, especially in comparison.", 'start': 286.379, 'duration': 2.743}, {'end': 293.425, 'text': 'this is actually going to seemingly take longer than it did because it pulled up on another screen.', 'start': 289.122, 'duration': 4.303}, {'end': 302.411, 'text': "But one of the things that I really like is when you open VS code, it's going to show you often some updates of what became new that month.", 'start': 294.045, 'duration': 8.366}, {'end': 307.273, 'text': 'So the stable edition comes out with new features and these are pretty powerful features every single month,', 'start': 302.511, 'duration': 4.762}, {'end': 309.914, 'text': 'and they give you this kind of newsletter to show you what all is new.', 'start': 307.273, 'duration': 2.641}, {'end': 313.876, 'text': 'And you can see in here it has like even images and animated videos.', 'start': 310.375, 'duration': 3.501}], 'summary': 'Vs code loads quickly, shows monthly updates with images and videos.', 'duration': 32.721, 'max_score': 281.155, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/WPqXP_kLzpo/pics/WPqXP_kLzpo281155.jpg'}, {'end': 385.456, 'src': 'embed', 'start': 348.482, 'weight': 1, 'content': [{'end': 352.485, 'text': 'to set up support for other languages than just JavaScript, so Python and Java,', 'start': 348.482, 'duration': 4.003}, {'end': 358.83, 'text': 'PHP working with Azure as a cloud platform and Docker as a container system.', 'start': 352.485, 'duration': 6.345}, {'end': 362.833, 'text': "If those things don't mean anything to you, that's okay because you don't need to worry about it.", 'start': 358.85, 'duration': 3.983}, {'end': 367.857, 'text': "Those are extra things that you can customize and use in VS Code, but you absolutely don't have to.", 'start': 362.873, 'duration': 4.984}, {'end': 372.502, 'text': 'So probably the first thing that you would do in VS code is go ahead and open a folder.', 'start': 368.658, 'duration': 3.844}, {'end': 377.768, 'text': "Now I'm opening a project called dev setups, which is one that I've been working on recently,", 'start': 372.843, 'duration': 4.925}, {'end': 380.791, 'text': 'which allows users to upload an image of their desk setup.', 'start': 377.768, 'duration': 3.023}, {'end': 383.294, 'text': 'And you can kind of scroll through and see different people set up.', 'start': 380.851, 'duration': 2.443}, {'end': 385.456, 'text': "So it's just kind of a fun project that I've been working on.", 'start': 383.314, 'duration': 2.142}], 'summary': "Vs code supports python, java, php, azure, docker. working on 'dev setups' project.", 'duration': 36.974, 'max_score': 348.482, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/WPqXP_kLzpo/pics/WPqXP_kLzpo348482.jpg'}, {'end': 463.824, 'src': 'embed', 'start': 440.951, 'weight': 5, 'content': [{'end': 448.554, 'text': "And then I can go in and actually do a replace, for example, of replacing this with something else, it doesn't really matter.", 'start': 440.951, 'duration': 7.603}, {'end': 453.057, 'text': 'And the cool thing is VS code will show you kind of in line what that replace will do.', 'start': 449.054, 'duration': 4.003}, {'end': 454.578, 'text': 'So react will become something else.', 'start': 453.137, 'duration': 1.441}, {'end': 456.219, 'text': 'This is not something I want to do.', 'start': 454.899, 'duration': 1.32}, {'end': 457.54, 'text': "So I'm gonna go ahead and back out of that.", 'start': 456.24, 'duration': 1.3}, {'end': 460.803, 'text': "So we'll talk a little bit more about search and replace in a minute.", 'start': 458.081, 'duration': 2.722}, {'end': 463.824, 'text': 'But you come down, you also have a source control tab.', 'start': 461.243, 'duration': 2.581}], 'summary': 'Demonstrates using vs code to perform search and replace, including visual feedback, and accessing source control.', 'duration': 22.873, 'max_score': 440.951, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/WPqXP_kLzpo/pics/WPqXP_kLzpo440951.jpg'}, {'end': 502.016, 'src': 'embed', 'start': 473.127, 'weight': 6, 'content': [{'end': 476.928, 'text': 'So all of your get stuff you can do right inside of VS code, which is really nice.', 'start': 473.127, 'duration': 3.801}, {'end': 479.869, 'text': "There's also a debugging section down here.", 'start': 477.668, 'duration': 2.201}, {'end': 486.731, 'text': 'So this allows you to do like a true debugging experience, where you can have breakpoints and inspect variables and all that sort of stuff.', 'start': 479.949, 'duration': 6.782}, {'end': 491.432, 'text': "And then lastly, you'll come down and see there's the extensions tab.", 'start': 487.471, 'duration': 3.961}, {'end': 496.534, 'text': 'And this is where you can search for extensions to add different pieces of functionality to your VS code instance.', 'start': 491.472, 'duration': 5.062}, {'end': 502.016, 'text': 'Now the couple of a couple of tabs I have down here, these are extra ones that I have installed from extensions.', 'start': 497.014, 'duration': 5.002}], 'summary': 'Vs code offers debugging, extensions, and extra tabs for added functionality.', 'duration': 28.889, 'max_score': 473.127, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/WPqXP_kLzpo/pics/WPqXP_kLzpo473127.jpg'}, {'end': 556.959, 'src': 'embed', 'start': 524.955, 'weight': 7, 'content': [{'end': 529.979, 'text': "you can click to install it and it'll be ready to go and yours will start to look a lot more like mine.", 'start': 524.955, 'duration': 5.024}, {'end': 534.163, 'text': 'But I will cover some of the different things that I have customized in mind here in a second.', 'start': 530.38, 'duration': 3.783}, {'end': 544.375, 'text': "So one of the things that I think is really neat with VS Code is you can kind of customize the way things look and your space that you're working with with using shortcuts.", 'start': 535.834, 'duration': 8.541}, {'end': 545.595, 'text': 'This is one of my favorite things.', 'start': 544.435, 'duration': 1.16}, {'end': 548.316, 'text': "So let me open up, here's an app CSS file.", 'start': 545.615, 'duration': 2.701}, {'end': 549.777, 'text': "So here's a random CSS file.", 'start': 548.356, 'duration': 1.421}, {'end': 556.959, 'text': 'And I can do Command B on Mac or Control B on Windows.', 'start': 550.637, 'duration': 6.322}], 'summary': 'Customize vs code to improve workflow with shortcuts and css customization.', 'duration': 32.004, 'max_score': 524.955, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/WPqXP_kLzpo/pics/WPqXP_kLzpo524955.jpg'}], 'start': 245.959, 'title': 'Vs code insiders edition and features', 'summary': 'Discusses the benefits of using vs code insiders edition, highlighting frequent builds with new features and bug fixes, coexistence of stable and insiders edition, quick loading time, monthly updates with powerful features, effective communication of changes to users, setting up support for python, java, and php, navigating sidebar icons, using search and replace feature, managing source control, debugging, adding extensions, customizing workspace layout, and using shortcuts for efficient navigation and file management.', 'chapters': [{'end': 347.862, 'start': 245.959, 'title': 'Vs code insiders edition overview', 'summary': 'Discusses the benefits of using vs code insiders edition, highlighting the frequent builds with new features and bug fixes, the coexistence of both stable and insiders edition, and the quick loading time of vs code. it also emphasizes the monthly updates with powerful features and effective communication of changes to the users.', 'duration': 101.903, 'highlights': ['VS Code Insiders Edition provides frequent builds with new features and bug fixes, at least every day.', 'Users can install both VS Code stable edition and the insiders edition on their devices without any issues.', "VS Code's stable edition releases new features every month and effectively communicates these changes via newsletters with images and animated videos.", 'The quick loading time of VS Code is highlighted, providing a seamless experience for users.', 'VS Code allows users to access recent projects, keyboard cheat sheets, tips, tricks, and customization options upon opening the welcome page.']}, {'end': 725.307, 'start': 348.482, 'title': 'Vs code features and customization', 'summary': 'Covers setting up support for python, java, and php in vs code, opening a project, navigating the sidebar icons, using the search and replace feature, managing source control, debugging, and adding extensions. it also demonstrates customizing the workspace layout and using shortcuts for efficient navigation and file management.', 'duration': 376.825, 'highlights': ['Setting up support for Python, Java, and PHP in VS Code The chapter discusses expanding language support in VS Code to Python, Java, and PHP, enabling users to work with Azure as a cloud platform and Docker as a container system.', 'Navigating the sidebar icons and opening a project The transcript explains the process of opening a project in VS Code, demonstrating the use of the sidebar icons to access files and folders within the project.', 'Using the search and replace feature The search and replace feature in VS Code is highlighted, showcasing its powerful functionality to find instances of specific terms within a project and perform replacements, with a demonstration of in-line previews for replacements.', 'Managing source control and debugging The chapter covers using the source control tab within VS Code to track changes, stage files, and commit them, as well as the debugging section for a thorough debugging experience with breakpoints and variable inspection.', 'Adding extensions and customizing workspace layout The transcript explains the process of adding extensions to VS Code to enhance its functionality and demonstrates customizing the workspace layout, including the use of themes and shortcuts for efficient navigation and workspace management.']}], 'duration': 479.348, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/WPqXP_kLzpo/pics/WPqXP_kLzpo245959.jpg', 'highlights': ['VS Code Insiders Edition provides frequent builds with new features and bug fixes, at least every day.', 'Setting up support for Python, Java, and PHP in VS Code enables users to work with Azure and Docker.', "VS Code's stable edition releases new features every month and effectively communicates changes via newsletters.", 'The quick loading time of VS Code provides a seamless experience for users.', 'Navigating the sidebar icons and opening a project in VS Code is demonstrated.', 'Using the search and replace feature in VS Code showcases its powerful functionality.', 'Managing source control and debugging in VS Code is covered thoroughly.', 'Adding extensions and customizing workspace layout in VS Code is explained.']}, {'end': 1294.77, 'segs': [{'end': 752.489, 'src': 'embed', 'start': 725.347, 'weight': 0, 'content': [{'end': 730.07, 'text': 'But you can also take a window over here and have three side by side and however many you want.', 'start': 725.347, 'duration': 4.723}, {'end': 736.476, 'text': 'So this only so practical depending on the size of your screen, but you have the flexibility to kind of make that your own, which is really nice.', 'start': 730.45, 'duration': 6.026}, {'end': 744.544, 'text': 'Alright, one thing I want to let you know is your kind of holy grail, your master command inside of VS code is going to be the command palette.', 'start': 737.157, 'duration': 7.387}, {'end': 747.507, 'text': 'So this is Command Shift P or Ctrl Shift P.', 'start': 745.065, 'duration': 2.442}, {'end': 752.489, 'text': 'And after you do that, you have the ability to kind of search for whatever you want.', 'start': 748.508, 'duration': 3.981}], 'summary': 'Customize vs code layout; use command palette for efficiency.', 'duration': 27.142, 'max_score': 725.347, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/WPqXP_kLzpo/pics/WPqXP_kLzpo725347.jpg'}, {'end': 791.38, 'src': 'embed', 'start': 765.893, 'weight': 1, 'content': [{'end': 772.055, 'text': 'So all of the border items up here, all the sidebar, all of that stuff is completely gone.', 'start': 765.893, 'duration': 6.162}, {'end': 774.875, 'text': 'And now I can just focus on my code.', 'start': 773.194, 'duration': 1.681}, {'end': 779.096, 'text': "Lots of people love this feature where they've got no distractions, they just see code.", 'start': 775.295, 'duration': 3.801}, {'end': 783.057, 'text': "I don't personally use this because I don't get too distracted by the other stuff going on.", 'start': 779.516, 'duration': 3.541}, {'end': 787.039, 'text': 'But I think this is a pretty cool feature inside of VS code to be able to use.', 'start': 783.437, 'duration': 3.602}, {'end': 791.38, 'text': "So I'm going to toggle this back off by running that command again from the command palette.", 'start': 787.059, 'duration': 4.321}], 'summary': 'Vs code allows distraction-free coding by removing border items and sidebar.', 'duration': 25.487, 'max_score': 765.893, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/WPqXP_kLzpo/pics/WPqXP_kLzpo765893.jpg'}, {'end': 853.184, 'src': 'embed', 'start': 824.938, 'weight': 2, 'content': [{'end': 829.182, 'text': 'you can just kind of select and really jump to wherever you want inside of your code pretty quickly.', 'start': 824.938, 'duration': 4.244}, {'end': 834.808, 'text': "So I don't leave the mini map on just because I don't want to take up space in my instance of VS code.", 'start': 829.763, 'duration': 5.045}, {'end': 838.792, 'text': 'But you can leave mini map there and use it to jump around really big files.', 'start': 834.908, 'duration': 3.884}, {'end': 846.178, 'text': 'Now again, going to the command palette, you have the ability to toggle on the mini map and add it or get rid of it.', 'start': 839.252, 'duration': 6.926}, {'end': 847.499, 'text': 'So you can do that just like that.', 'start': 846.218, 'duration': 1.281}, {'end': 849.941, 'text': 'All right, I mentioned search and replace.', 'start': 847.94, 'duration': 2.001}, {'end': 853.184, 'text': 'So we started by doing this over in the left over here.', 'start': 850.522, 'duration': 2.662}], 'summary': 'Vs code allows quick navigation in code using mini map and command palette.', 'duration': 28.246, 'max_score': 824.938, 'thumbnail': ''}, {'end': 986.728, 'src': 'embed', 'start': 947.771, 'weight': 3, 'content': [{'end': 950.653, 'text': 'So the search and replace stuff in VS code is really, really powerful.', 'start': 947.771, 'duration': 2.882}, {'end': 958.058, 'text': 'You can save yourself a lot of time if you understand some of the shortcuts of how to trigger the search and replace and then go ahead and act on them.', 'start': 951.053, 'duration': 7.005}, {'end': 961.971, 'text': "So speaking of shortcuts, we've mentioned a few already.", 'start': 959.249, 'duration': 2.722}, {'end': 965.373, 'text': 'We mentioned command or control B to toggle open this window.', 'start': 962.091, 'duration': 3.282}, {'end': 970.077, 'text': "There's also a few neat ones where you can do command W to close a file.", 'start': 965.914, 'duration': 4.163}, {'end': 971.097, 'text': 'I use this a lot.', 'start': 970.277, 'duration': 0.82}, {'end': 976.621, 'text': 'And then also, if you have two files open or multiple files open, whatever these are,', 'start': 971.678, 'duration': 4.943}, {'end': 981.505, 'text': 'you can control tab to switch through these files so you can toggle through them like this.', 'start': 976.621, 'duration': 4.884}, {'end': 982.766, 'text': 'I use this a lot as well.', 'start': 981.705, 'duration': 1.061}, {'end': 986.728, 'text': 'You can also do control shift tab to toggle back the opposite way.', 'start': 983.266, 'duration': 3.462}], 'summary': 'Vs code search and replace shortcuts save time. use command/control b, w, tab, shift tab for efficient navigation.', 'duration': 38.957, 'max_score': 947.771, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/WPqXP_kLzpo/pics/WPqXP_kLzpo947771.jpg'}, {'end': 1106.067, 'src': 'embed', 'start': 1077.746, 'weight': 7, 'content': [{'end': 1081.449, 'text': 'so I could just arrow over so I could type the arrow key a bunch of times.', 'start': 1077.746, 'duration': 3.703}, {'end': 1082.67, 'text': "that's not really productive.", 'start': 1081.449, 'duration': 1.221}, {'end': 1086.773, 'text': 'Or I can start to use some shortcuts to help me navigate this text.', 'start': 1083.37, 'duration': 3.403}, {'end': 1093.077, 'text': 'So if you hold down option and press left or right, what this will do is it will navigate word by word.', 'start': 1087.273, 'duration': 5.804}, {'end': 1096.76, 'text': 'And that word is kind of a loose definition where like this thing is a word.', 'start': 1093.297, 'duration': 3.463}, {'end': 1097.6, 'text': 'This thing is a word.', 'start': 1096.84, 'duration': 0.76}, {'end': 1100.443, 'text': 'This is kind of a series of connected characters.', 'start': 1098.201, 'duration': 2.242}, {'end': 1103.625, 'text': 'So it really just kind of goes by where the space is.', 'start': 1100.983, 'duration': 2.642}, {'end': 1106.067, 'text': 'So you can navigate word by word this way.', 'start': 1103.685, 'duration': 2.382}], 'summary': 'Using shortcuts like option+left/right allows navigating word by word, improving productivity.', 'duration': 28.321, 'max_score': 1077.746, 'thumbnail': ''}, {'end': 1167.134, 'src': 'embed', 'start': 1138.011, 'weight': 4, 'content': [{'end': 1140.733, 'text': 'So you might have to play around with that to get kind of comfortable in doing that.', 'start': 1138.011, 'duration': 2.722}, {'end': 1142.395, 'text': 'But it is really, really helpful.', 'start': 1141.093, 'duration': 1.302}, {'end': 1150.446, 'text': 'If you can start to learn to use your shortcuts to navigate through text quickly, you can save yourself some time, keep your hands on the keyboard,', 'start': 1143.399, 'duration': 7.047}, {'end': 1154.19, 'text': 'keep them off of the mouse and really become a much more productive programmer.', 'start': 1150.446, 'duration': 3.744}, {'end': 1160.206, 'text': 'So I want to make sure that I undo all of these changes, and I can do that with command or control Z,', 'start': 1155.461, 'duration': 4.745}, {'end': 1163.189, 'text': 'so I can hold that down and undo all the changes that I just made.', 'start': 1160.206, 'duration': 2.983}, {'end': 1167.134, 'text': "You can also, as you would probably expect if you've used other editors,", 'start': 1163.79, 'duration': 3.344}], 'summary': 'Learning text shortcuts can save time and make programmers more productive.', 'duration': 29.123, 'max_score': 1138.011, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/WPqXP_kLzpo/pics/WPqXP_kLzpo1138011.jpg'}, {'end': 1203.776, 'src': 'embed', 'start': 1174.181, 'weight': 8, 'content': [{'end': 1178.247, 'text': "You can do that, but even cooler, you don't have to select the line.", 'start': 1174.181, 'duration': 4.066}, {'end': 1183.695, 'text': "So if I'm on this line and I want to copy this entire thing, I can just do command C and then command V.", 'start': 1178.287, 'duration': 5.408}, {'end': 1185.017, 'text': "So I don't even have to select it.", 'start': 1183.695, 'duration': 1.322}, {'end': 1189.003, 'text': 'It will basically inherently select the entire line by itself.', 'start': 1185.457, 'duration': 3.546}, {'end': 1196.109, 'text': "Now another one of my favorites is you can use command D or control D to select the actual word that you're on.", 'start': 1189.463, 'duration': 6.646}, {'end': 1203.776, 'text': 'So if I wanted my character was inside of this word, I could use command D, then I can use command F to be able to search that thing.', 'start': 1196.649, 'duration': 7.127}], 'summary': 'Keyboard shortcuts allow easy selection and copying without manual selection. command d/control d selects the current word.', 'duration': 29.595, 'max_score': 1174.181, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/WPqXP_kLzpo/pics/WPqXP_kLzpo1174181.jpg'}, {'end': 1238.888, 'src': 'embed', 'start': 1212.043, 'weight': 5, 'content': [{'end': 1218.624, 'text': 'Now another thing that will save you some time in VS code is the built in IntelliSense that VS code provides you.', 'start': 1212.043, 'duration': 6.581}, {'end': 1224.125, 'text': 'So what I mean is if I start typing in document, you see I get a bunch of things pop open here.', 'start': 1218.644, 'duration': 5.481}, {'end': 1234.827, 'text': "But if I'm working with the document element, object inside of JavaScript, and I press dot, now VS code knows that this thing is the document object.", 'start': 1224.625, 'duration': 10.202}, {'end': 1238.888, 'text': 'And I can scroll through to see all the different things I can do with this document object.', 'start': 1234.907, 'duration': 3.981}], 'summary': "Vs code's built-in intellisense saves time by providing suggestions for document object in javascript.", 'duration': 26.845, 'max_score': 1212.043, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/WPqXP_kLzpo/pics/WPqXP_kLzpo1212043.jpg'}], 'start': 725.347, 'title': 'Vs code tips & shortcuts', 'summary': 'Covers various vs code tips and shortcuts, including using the command palette for quick access, utilizing zen mode for distraction-free coding, toggling the mini map for efficient navigation in large files, and performing advanced search and replace operations within files, providing insights into maximizing productivity in vs code.', 'chapters': [{'end': 947.091, 'start': 725.347, 'title': 'Vs code tips & shortcuts', 'summary': 'Covers various vs code tips and shortcuts, including using the command palette for quick access, utilizing zen mode for distraction-free coding, toggling the mini map for efficient navigation in large files, and performing advanced search and replace operations within files, providing insights into maximizing productivity in vs code.', 'duration': 221.744, 'highlights': ['The command palette (Command Shift P or Ctrl Shift P) allows quick access to any VS Code command, enhancing productivity. The command palette provides quick access to any VS Code command, boosting productivity.', 'Zen mode (View > Toggle Zen mode) removes distractions, providing a focused environment for code, offering a feature favored by many users. Zen mode removes distractions, providing a focused environment for code, a feature favored by many users.', 'Toggling the mini map provides efficient navigation in large files, allowing quick scrolling and jumping within the code. Toggling the mini map provides efficient navigation in large files, allowing quick scrolling and jumping within the code.', 'Performing advanced search and replace operations within files, including the ability to replace instances line by line or file by file, offers a powerful and efficient workflow in VS Code. Performing advanced search and replace operations within files offers a powerful and efficient workflow in VS Code.']}, {'end': 1294.77, 'start': 947.771, 'title': 'Vs code shortcuts and productivity tips', 'summary': 'Explains various productivity tips for using vs code efficiently, including shortcuts for quick file navigation, text manipulation, and utilizing built-in intellisense, emphasizing the importance of keyboard usage for improving coding productivity.', 'duration': 346.999, 'highlights': ['The importance of learning shortcuts for improving coding productivity is emphasized, with the suggestion that using keyboard shortcuts can save a significant amount of time. Learning shortcuts for coding can save a lot of time, as less mouse usage and more keyboard usage leads to increased productivity.', 'Various keyboard shortcuts for quick file navigation are explained, such as using command P to search and open files, control tab and control shift tab to toggle through open files, and command or control W to close a file. Keyboard shortcuts for quick file navigation include command P to search and open files, control tab and control shift tab to toggle through open files, and command or control W to close a file.', 'Tips for efficient text navigation using keyboard shortcuts are provided, including using option + left or right to navigate word by word, command + left or right to reach the beginning and end of a line, and command + up or down to navigate to the top or bottom of a file. Efficient text navigation can be achieved using keyboard shortcuts like option + left or right to navigate word by word, command + left or right to reach the beginning and end of a line, and command + up or down to navigate to the top or bottom of a file.', 'The usage of various keyboard shortcuts for text manipulation, such as command C/V for copy/paste, command D for selecting a word, and command F for searching, is highlighted as a time-saving practice. Utilizing keyboard shortcuts for text manipulation, including command C/V for copy/paste, command D for selecting a word, and command F for searching, can save time and improve efficiency.', 'The benefits of utilizing built-in IntelliSense in VS Code for efficient coding, including auto-completion and parameter assistance, are explained, showcasing the time-saving capabilities of this feature. Utilizing built-in IntelliSense in VS Code provides benefits such as auto-completion and parameter assistance, which can significantly enhance coding efficiency and save time.']}], 'duration': 569.423, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/WPqXP_kLzpo/pics/WPqXP_kLzpo725347.jpg', 'highlights': ['The command palette provides quick access to any VS Code command, enhancing productivity.', 'Zen mode removes distractions, providing a focused environment for code, a feature favored by many users.', 'Toggling the mini map provides efficient navigation in large files, allowing quick scrolling and jumping within the code.', 'Performing advanced search and replace operations within files offers a powerful and efficient workflow in VS Code.', 'Learning shortcuts for coding can save a lot of time, as less mouse usage and more keyboard usage leads to increased productivity.', 'Utilizing built-in IntelliSense in VS Code provides benefits such as auto-completion and parameter assistance, which can significantly enhance coding efficiency and save time.', 'Keyboard shortcuts for quick file navigation include command P to search and open files, control tab and control shift tab to toggle through open files, and command or control W to close a file.', 'Efficient text navigation can be achieved using keyboard shortcuts like option + left or right to navigate word by word, command + left or right to reach the beginning and end of a line, and command + up or down to navigate to the top or bottom of a file.', 'Utilizing keyboard shortcuts for text manipulation, including command C/V for copy/paste, command D for selecting a word, and command F for searching, can save time and improve efficiency.']}, {'end': 1978.309, 'segs': [{'end': 1326.316, 'src': 'embed', 'start': 1295.31, 'weight': 0, 'content': [{'end': 1299.714, 'text': 'So IntelliSense is something that I use all of the time, because, as a developer,', 'start': 1295.31, 'duration': 4.404}, {'end': 1304.357, 'text': "I don't necessarily want to write every single word or every single character, every single line of code.", 'start': 1299.714, 'duration': 4.643}, {'end': 1308.4, 'text': 'I would rather have a tool take care of assisting that for me.', 'start': 1304.958, 'duration': 3.442}, {'end': 1316.027, 'text': 'And VS Code does a really, really great job of providing you really powerful IntelliSense that you can use to save yourself a lot of time.', 'start': 1308.821, 'duration': 7.206}, {'end': 1319.69, 'text': "Now another really cool feature, I'm going to get rid of all of these changes.", 'start': 1316.727, 'duration': 2.963}, {'end': 1326.316, 'text': "Another feature that I like a lot is I'm going to add a new file in here, we haven't really shown how to do new files.", 'start': 1320.41, 'duration': 5.906}], 'summary': 'Vs code provides powerful intellisense, saving developers time. also, it offers easy file creation.', 'duration': 31.006, 'max_score': 1295.31, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/WPqXP_kLzpo/pics/WPqXP_kLzpo1295310.jpg'}, {'end': 1367.622, 'src': 'embed', 'start': 1340.329, 'weight': 1, 'content': [{'end': 1344.552, 'text': 'So if you look up Emmett snippets in here, you can go to docs.mit.io.', 'start': 1340.329, 'duration': 4.223}, {'end': 1346.433, 'text': 'And you can learn a lot more about this.', 'start': 1344.912, 'duration': 1.521}, {'end': 1350.935, 'text': "But basically, it's powerful shortcuts that you can use for your HTML and CSS.", 'start': 1346.473, 'duration': 4.462}, {'end': 1358.518, 'text': "So if I do the bang character here, it shows me VS code does with IntelliSense that there's an image abbreviation for this.", 'start': 1351.715, 'duration': 6.803}, {'end': 1363.14, 'text': 'And this will give me the boilerplate code to an HTML file.', 'start': 1358.698, 'duration': 4.442}, {'end': 1364.401, 'text': "That's really powerful.", 'start': 1363.5, 'duration': 0.901}, {'end': 1367.622, 'text': "I couldn't write all of this stuff from scratch myself personally.", 'start': 1364.601, 'duration': 3.021}], 'summary': 'Emmett provides powerful shortcuts for html and css, saving time and effort in coding.', 'duration': 27.293, 'max_score': 1340.329, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/WPqXP_kLzpo/pics/WPqXP_kLzpo1340329.jpg'}, {'end': 1477.092, 'src': 'embed', 'start': 1449.204, 'weight': 2, 'content': [{'end': 1451.765, 'text': 'you can do an input with a type of text.', 'start': 1449.204, 'duration': 2.561}, {'end': 1456.626, 'text': "there's all sorts of these snippets to make writing your HTML so much quicker and easier.", 'start': 1451.765, 'duration': 4.861}, {'end': 1465.805, 'text': "It's really worth looking and spending some time to figure out how to leverage the power of Emmett to help you generate snippets,", 'start': 1458.3, 'duration': 7.505}, {'end': 1468.206, 'text': 'or use snippets to generate your HTML code.', 'start': 1465.805, 'duration': 2.401}, {'end': 1472.709, 'text': "Now you can also do this in your CSS, I'm going to get rid of this file.", 'start': 1468.626, 'duration': 4.083}, {'end': 1473.85, 'text': "So I'm going to get rid of this thing.", 'start': 1472.729, 'duration': 1.121}, {'end': 1477.092, 'text': "And then I'll open up a CSS file.", 'start': 1474.75, 'duration': 2.342}], 'summary': 'Emmett can help generate html snippets and css code efficiently.', 'duration': 27.888, 'max_score': 1449.204, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/WPqXP_kLzpo/pics/WPqXP_kLzpo1449204.jpg'}, {'end': 1877.174, 'src': 'embed', 'start': 1843.008, 'weight': 3, 'content': [{'end': 1843.928, 'text': "That's actually kind of wild.", 'start': 1843.008, 'duration': 0.92}, {'end': 1845.069, 'text': "I've never done that one before.", 'start': 1843.988, 'duration': 1.081}, {'end': 1847.99, 'text': 'So you can customize so many things in VS code.', 'start': 1845.649, 'duration': 2.341}, {'end': 1848.89, 'text': "It's really, really nice.", 'start': 1848.05, 'duration': 0.84}, {'end': 1856.254, 'text': 'I would I would recommend just spending some time inside of these settings to really try to get things the way that you think work best for you.', 'start': 1849.03, 'duration': 7.224}, {'end': 1860.297, 'text': "All right, that said, let's move into extensions and themes.", 'start': 1856.934, 'duration': 3.363}, {'end': 1864.802, 'text': "And let's start with themes because these are going to be extensions themselves.", 'start': 1860.718, 'duration': 4.084}, {'end': 1869.166, 'text': 'And they can kind of show you how to customize the look and feel of your editor even more.', 'start': 1864.862, 'duration': 4.304}, {'end': 1877.174, 'text': 'So I mentioned that I use the cobalt to theme so you can search this and search cobalt to and then this is the official theme by West boss.', 'start': 1869.746, 'duration': 7.428}], 'summary': 'Customizable vs code offers various themes for personalization and improved workflow.', 'duration': 34.166, 'max_score': 1843.008, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/WPqXP_kLzpo/pics/WPqXP_kLzpo1843008.jpg'}], 'start': 1295.31, 'title': 'Vs code features and leveraging emmet', 'summary': "Highlights the time-saving benefits of vs code's intellisense and the powerful emmet feature for quickly generating html and css snippets, setting up vs code settings, and customizing themes and extensions, showcasing how it saves time and enhances productivity for developers.", 'chapters': [{'end': 1386.18, 'start': 1295.31, 'title': 'Vs code features: intellisense and emmet', 'summary': "Highlights the time-saving benefits of vs code's intellisense, which assists in writing code and the powerful emmet feature that provides shortcuts for html and css, showcasing how it saves time and enhances productivity for developers.", 'duration': 90.87, 'highlights': ['VS Code provides powerful IntelliSense, saving developers a lot of time by assisting in writing code. IntelliSense in VS Code saves time by providing powerful assistance in writing code, reducing the need for developers to write every single word, character, or line of code.', "Emmet feature in VS Code offers powerful shortcuts for HTML and CSS, further saving time and enhancing productivity for developers. The Emmet feature in VS Code provides powerful shortcuts for HTML and CSS, such as using the bang character to generate the boilerplate code for an HTML file or typing 'h1' to create a heading, showcasing its time-saving and productivity-enhancing capabilities."]}, {'end': 1978.309, 'start': 1386.72, 'title': 'Leveraging emmet for efficient html and css', 'summary': 'Discusses the powerful features of emmet for quickly generating html and css snippets, setting up vs code settings, and customizing themes and extensions.', 'duration': 591.589, 'highlights': ['Emmet allows quick generation of HTML and CSS snippets Emmet provides shortcuts for creating HTML elements with classes, IDs, and attributes, saving time and effort.', 'Customizing VS Code settings and appearance The speaker demonstrates setting up font family, font ligatures, font size, and zoom level, as well as configuring word wrap and cursor styles.', 'Exploring themes and extensions in VS Code The chapter explains how to browse, install, and switch between different themes, showcasing popular themes like Cobalt2, Night Owl, Shades of Purple, and Winter is Coming.']}], 'duration': 682.999, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/WPqXP_kLzpo/pics/WPqXP_kLzpo1295310.jpg', 'highlights': ["VS Code's IntelliSense saves time by providing powerful assistance in writing code.", 'Emmet feature in VS Code offers powerful shortcuts for HTML and CSS, further saving time and enhancing productivity for developers.', 'Emmet allows quick generation of HTML and CSS snippets, saving time and effort.', 'Customizing VS Code settings and appearance enhances user experience and productivity.', 'Exploring themes and extensions in VS Code allows for personalization and optimization of the development environment.']}, {'end': 2478.166, 'segs': [{'end': 2060.853, 'src': 'embed', 'start': 2013.835, 'weight': 3, 'content': [{'end': 2021.296, 'text': 'So if I kind of mess up some of the tabs in here, and I put this stuff like all over the place, and it, this just looks like really terrible code.', 'start': 2013.835, 'duration': 7.461}, {'end': 2024.937, 'text': "When I save this now, it's going to format all of that stuff for me.", 'start': 2021.676, 'duration': 3.261}, {'end': 2033.679, 'text': 'So the combination of using prettier as an extension, as well as the setting in VS code for format on save is incredibly powerful.', 'start': 2025.317, 'duration': 8.362}, {'end': 2036.06, 'text': 'I do this for all of my projects.', 'start': 2034.159, 'duration': 1.901}, {'end': 2038.061, 'text': "So this is definitely one that's worth having.", 'start': 2036.28, 'duration': 1.781}, {'end': 2042.404, 'text': 'I also use an extension called advanced new file.', 'start': 2039.382, 'duration': 3.022}, {'end': 2046.546, 'text': 'And what this allows me to do if I come and grab the right one.', 'start': 2042.944, 'duration': 3.602}, {'end': 2048.187, 'text': 'so this is the one with dashes.', 'start': 2046.546, 'duration': 1.641}, {'end': 2058.973, 'text': 'what this allows me to do is, instead of coming over here and choosing to click to add a new file, I can run my new file command.', 'start': 2048.187, 'duration': 10.786}, {'end': 2060.853, 'text': 'So advanced new file.', 'start': 2059.713, 'duration': 1.14}], 'summary': "Using prettier and vs code's format on save is powerful. also, utilizes advanced new file extension for efficiency.", 'duration': 47.018, 'max_score': 2013.835, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/WPqXP_kLzpo/pics/WPqXP_kLzpo2013835.jpg'}, {'end': 2112.004, 'src': 'embed', 'start': 2081.382, 'weight': 2, 'content': [{'end': 2083.964, 'text': "So that's one of the ones that I use a lot myself as well.", 'start': 2081.382, 'duration': 2.582}, {'end': 2090.349, 'text': 'Another one I find handy is the better comments extension.', 'start': 2085.324, 'duration': 5.025}, {'end': 2097.995, 'text': 'what this will do is allow me in my code to write different types of comments like to do, and it will highlight that different color.', 'start': 2090.349, 'duration': 7.646}, {'end': 2102.538, 'text': "So if I say something like exclamation, that's going to turn this thing red.", 'start': 2098.055, 'duration': 4.483}, {'end': 2107.142, 'text': "And there's also a star for a green comment.", 'start': 2102.958, 'duration': 4.184}, {'end': 2112.004, 'text': 'And then if you define something as a param, it will highlight that or color that as well.', 'start': 2107.802, 'duration': 4.202}], 'summary': 'Coding extensions like better comments allow for color-highlighted comments, improving code readability.', 'duration': 30.622, 'max_score': 2081.382, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/WPqXP_kLzpo/pics/WPqXP_kLzpo2081382.jpg'}, {'end': 2148.806, 'src': 'embed', 'start': 2123.729, 'weight': 1, 'content': [{'end': 2129.013, 'text': "So another great feature, especially if you're a JavaScript developer, is there's an extension called Quokka,", 'start': 2123.729, 'duration': 5.284}, {'end': 2131.734, 'text': 'which gives you a JavaScript playground and TypeScript.', 'start': 2129.013, 'duration': 2.721}, {'end': 2135.877, 'text': 'So if I run the Quokka command, I can do a new JavaScript file.', 'start': 2132.095, 'duration': 3.782}, {'end': 2141.301, 'text': "And then inside of here, I've got like a live JavaScript playpad or scratchpad or whatever you want to call it.", 'start': 2136.277, 'duration': 5.024}, {'end': 2143.883, 'text': 'And I can type JavaScript right inside of here.', 'start': 2141.741, 'duration': 2.142}, {'end': 2148.806, 'text': 'And I can see the output over here as well as the output logged out over on this side as well.', 'start': 2144.203, 'duration': 4.603}], 'summary': 'Quokka extension provides a javascript playground and typescript for developers, allowing live javascript testing and output display.', 'duration': 25.077, 'max_score': 2123.729, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/WPqXP_kLzpo/pics/WPqXP_kLzpo2123729.jpg'}, {'end': 2245.281, 'src': 'embed', 'start': 2206.104, 'weight': 0, 'content': [{'end': 2209.247, 'text': 'And what this will do is it will serve this on a real port.', 'start': 2206.104, 'duration': 3.143}, {'end': 2210.769, 'text': "So we'll start up a server.", 'start': 2209.307, 'duration': 1.462}, {'end': 2214.57, 'text': 'serve this from a real port, and I can update this file.', 'start': 2211.389, 'duration': 3.181}, {'end': 2218.392, 'text': "And as soon as I save now it's reflected inside of the browser as well.", 'start': 2214.63, 'duration': 3.762}, {'end': 2224.834, 'text': 'Because of that live server extension, it handles all of that stuff for me, which is really, really amazing.', 'start': 2218.832, 'duration': 6.002}, {'end': 2231.517, 'text': "You'll definitely want to have this if you're doing any sort of basic HTML, CSS and JavaScript stuff.", 'start': 2225.054, 'duration': 6.463}, {'end': 2234.138, 'text': 'installing that extension will make it really easy to run that stuff.', 'start': 2231.517, 'duration': 2.621}, {'end': 2236.158, 'text': 'A couple of other nice ones.', 'start': 2234.738, 'duration': 1.42}, {'end': 2243.08, 'text': "There's a polar code extension, this one allows you to take really sweet looking images of your code.", 'start': 2236.198, 'duration': 6.882}, {'end': 2245.281, 'text': 'So you basically copy in some of your code.', 'start': 2243.1, 'duration': 2.181}], 'summary': 'Live server extension updates code instantly, essential for basic web development. polar code extension captures code images.', 'duration': 39.177, 'max_score': 2206.104, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/WPqXP_kLzpo/pics/WPqXP_kLzpo2206104.jpg'}, {'end': 2307.229, 'src': 'embed', 'start': 2266.468, 'weight': 6, 'content': [{'end': 2273.731, 'text': 'And what this does is if I start to update, the title here and make this an h1.', 'start': 2266.468, 'duration': 7.263}, {'end': 2277.033, 'text': "Notice it's auto updating the closing tag as well.", 'start': 2274.111, 'duration': 2.922}, {'end': 2282.135, 'text': "So you'll definitely want to have that extension to help you out with some of some of your HTML stuff.", 'start': 2277.073, 'duration': 5.062}, {'end': 2286.838, 'text': "And there's also the bracket pair color riser.", 'start': 2282.676, 'duration': 4.162}, {'end': 2296.543, 'text': 'And this one is pretty sweet, because inside of JavaScript, this will color your brackets to match each other to show you which one goes with each.', 'start': 2288.419, 'duration': 8.124}, {'end': 2299.525, 'text': "So notice that we've got a purple color here.", 'start': 2297.024, 'duration': 2.501}, {'end': 2306.208, 'text': "And then we've got a blue color to show that this one goes with this one, this one with this one, and this one with this one.", 'start': 2299.645, 'duration': 6.563}, {'end': 2307.229, 'text': 'This is really nice.', 'start': 2306.509, 'duration': 0.72}], 'summary': 'Visual studio code extensions aid in html and javascript coding by auto-updating tags and color-coding brackets for easy matching.', 'duration': 40.761, 'max_score': 2266.468, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/WPqXP_kLzpo/pics/WPqXP_kLzpo2266468.jpg'}, {'end': 2401.356, 'src': 'embed', 'start': 2325.021, 'weight': 8, 'content': [{'end': 2328.183, 'text': "So if you're working in really really big files or really big project,", 'start': 2325.021, 'duration': 3.162}, {'end': 2332.987, 'text': 'you can set bookmarks inside of your files and then be able to toggle through your bookmarks.', 'start': 2328.183, 'duration': 4.804}, {'end': 2337.21, 'text': 'So if you have really important spots inside of different pieces of code,', 'start': 2333.007, 'duration': 4.203}, {'end': 2342.494, 'text': 'you can mark those and then be able to move through them using the commands with this bookmarks extension.', 'start': 2337.21, 'duration': 5.284}, {'end': 2343.975, 'text': "There's also Cloak.", 'start': 2343.174, 'duration': 0.801}, {'end': 2349.7, 'text': "This is a really nice one if you're working with private credentials and you do screen recordings like I do.", 'start': 2344.095, 'duration': 5.605}, {'end': 2351.321, 'text': 'Cloak will take a .', 'start': 2349.8, 'duration': 1.521}, {'end': 2352.102, 'text': 'env file.', 'start': 2351.321, 'duration': 0.781}, {'end': 2352.903, 'text': 'So if you use .', 'start': 2352.162, 'duration': 0.741}, {'end': 2357.787, 'text': "env to have your environment variables and they're private, you don't want people to see those, which you probably don't.", 'start': 2352.903, 'duration': 4.884}, {'end': 2361.571, 'text': "You can turn on Cloak and it will hide those things from everybody that's watching.", 'start': 2358.248, 'duration': 3.323}, {'end': 2366.795, 'text': "This is really useful, as it says here if you're presenting on stage, if you're streaming on Twitch or YouTube,", 'start': 2361.611, 'duration': 5.184}, {'end': 2369.558, 'text': 'if you record screencasts of your code, like we do here.', 'start': 2366.795, 'duration': 2.763}, {'end': 2372.543, 'text': 'Another nice one is CSS Peak.', 'start': 2370.782, 'duration': 1.761}, {'end': 2379.926, 'text': 'This allows you to view the CSS for a given class or ID.', 'start': 2372.803, 'duration': 7.123}, {'end': 2386.448, 'text': "So you can peak that where you don't have to go all the way over to the CSS file or, if it's coming from Bootstrap or something like that,", 'start': 2379.946, 'duration': 6.502}, {'end': 2387.809, 'text': "you don't have to open up the source files.", 'start': 2386.448, 'duration': 1.361}, {'end': 2390.61, 'text': 'You can kind of see that right in line in your code.', 'start': 2388.229, 'duration': 2.381}, {'end': 2393.111, 'text': "Next up, we've got the debugger for Chrome.", 'start': 2391.591, 'duration': 1.52}, {'end': 2399.494, 'text': "This one, we will actually have a section on this coming up of debugging inside of Visual Studio Code, and we'll use this extension to do that.", 'start': 2393.271, 'duration': 6.223}, {'end': 2401.356, 'text': "There's this dot env one.", 'start': 2400.054, 'duration': 1.302}], 'summary': 'Extensions discussed include bookmarks, cloak for hiding credentials, css peak, and debugger for chrome.', 'duration': 76.335, 'max_score': 2325.021, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/WPqXP_kLzpo/pics/WPqXP_kLzpo2325021.jpg'}], 'start': 1978.329, 'title': 'Vs code extensions and their benefits and for web development', 'summary': 'Discusses the benefits of various vs code extensions, including prettier for code formatting, advanced new file for creating files, better comments for specialized commenting, quokka for a javascript playground, and live server for real-time updates, with notable downloads of over 7 million. it also highlights the essential vs code extensions for web development, including the polar code extension for generating code images, auto rename tag for html, bracket pair colorizer for javascript, bookmarks for navigating big files, cloak for hiding private credentials, css peak for viewing css in-line, and debugger for chrome for debugging.', 'chapters': [{'end': 2224.834, 'start': 1978.329, 'title': 'Vs code extensions and their benefits', 'summary': 'Discusses the benefits of various vs code extensions, including prettier for code formatting, advanced new file for creating files, better comments for specialized commenting, quokka for a javascript playground, and live server for real-time updates, with notable downloads of over 7 million.', 'duration': 246.505, 'highlights': ['The Live Server extension has over 7 million downloads and enables real-time updates for files within the VS Code, offering enhanced convenience and efficiency.', 'Quokka provides a JavaScript and TypeScript playground within VS Code, allowing for live JavaScript coding and immediate output display, offering a more convenient alternative to using a browser console.', "The Better Comments extension allows for specialized commenting in code, such as highlighting 'to do' comments in different colors, improving code readability and organization.", 'The Advanced New File extension streamlines the process of creating new files within VS Code, offering a convenient shortcut for selecting the directory and naming the file, enhancing productivity and reducing manual clicking.', "Prettier, an extension for code formatting, can be combined with the 'format on save' setting in VS Code, automatically formatting code upon saving, improving code consistency and readability."]}, {'end': 2478.166, 'start': 2225.054, 'title': 'Vs code extensions for web development', 'summary': 'Highlights the essential vs code extensions for web development, including the polar code extension for generating code images, auto rename tag for html, bracket pair colorizer for javascript, bookmarks for navigating big files, cloak for hiding private credentials, css peak for viewing css in-line, and debugger for chrome for debugging.', 'duration': 253.112, 'highlights': ['Polar Code Extension It allows users to generate images of their code snippets for sharing on social media or blog posts, enhancing the visual appeal of the content.', 'Auto Rename Tag Automatically updates the closing tag when modifying HTML elements, streamlining the development process and reducing errors.', 'Bracket Pair Colorizer Colorizes brackets in JavaScript to visually indicate matching pairs, improving code readability and comprehension.', 'Bookmarks Enables setting and navigating through bookmarks in large code files, facilitating efficient code navigation and reference.', 'Cloak Hides private credentials from screen recordings and presentations, ensuring data privacy and security during public demonstrations.', 'CSS Peak Allows viewing CSS for a specific class or ID directly in the code, eliminating the need to switch to the CSS file or source files for reference.', 'Debugger for Chrome Facilitates debugging within Visual Studio Code, enhancing the development process and improving code stability and performance.']}], 'duration': 499.837, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/WPqXP_kLzpo/pics/WPqXP_kLzpo1978329.jpg', 'highlights': ['The Live Server extension has over 7 million downloads and enables real-time updates for files within the VS Code, offering enhanced convenience and efficiency.', 'Quokka provides a JavaScript and TypeScript playground within VS Code, allowing for live JavaScript coding and immediate output display, offering a more convenient alternative to using a browser console.', "The Better Comments extension allows for specialized commenting in code, such as highlighting 'to do' comments in different colors, improving code readability and organization.", 'The Advanced New File extension streamlines the process of creating new files within VS Code, offering a convenient shortcut for selecting the directory and naming the file, enhancing productivity and reducing manual clicking.', "Prettier, an extension for code formatting, can be combined with the 'format on save' setting in VS Code, automatically formatting code upon saving, improving code consistency and readability.", 'Polar Code Extension allows users to generate images of their code snippets for sharing on social media or blog posts, enhancing the visual appeal of the content.', 'Auto Rename Tag automatically updates the closing tag when modifying HTML elements, streamlining the development process and reducing errors.', 'Bracket Pair Colorizer colorizes brackets in JavaScript to visually indicate matching pairs, improving code readability and comprehension.', 'Bookmarks enables setting and navigating through bookmarks in large code files, facilitating efficient code navigation and reference.', 'Cloak hides private credentials from screen recordings and presentations, ensuring data privacy and security during public demonstrations.', 'CSS Peak allows viewing CSS for a specific class or ID directly in the code, eliminating the need to switch to the CSS file or source files for reference.', 'Debugger for Chrome facilitates debugging within Visual Studio Code, enhancing the development process and improving code stability and performance.']}, {'end': 3033.601, 'segs': [{'end': 2539.353, 'src': 'embed', 'start': 2478.186, 'weight': 0, 'content': [{'end': 2483.688, 'text': 'So, if you have a product, a third-party product, outside of Microsoft, outside of VS Code that you work with,', 'start': 2478.186, 'duration': 5.502}, {'end': 2486.409, 'text': "go and give it a shot to see if there's something out there that you can find.", 'start': 2483.688, 'duration': 2.721}, {'end': 2490.479, 'text': 'Import cost is another one that is great for JavaScript developers.', 'start': 2487.597, 'duration': 2.882}, {'end': 2494.323, 'text': 'This will basically just show you how big your import statements are.', 'start': 2490.539, 'duration': 3.784}, {'end': 2498.006, 'text': 'So if you look at the example image, that is not showing here.', 'start': 2494.423, 'duration': 3.583}, {'end': 2499.847, 'text': 'but if they had the example image up,', 'start': 2498.006, 'duration': 1.841}, {'end': 2505.392, 'text': "it would show you that you'll get some text right next to the import statement to show you how big that import is.", 'start': 2499.847, 'duration': 5.545}, {'end': 2511.497, 'text': "That way you can make sure that you're only importing the things that you really need and not anything extra.", 'start': 2505.812, 'duration': 5.685}, {'end': 2514.459, 'text': "we've got the live share extension down here.", 'start': 2512.797, 'duration': 1.662}, {'end': 2516.822, 'text': 'This one will actually have a section on in a minute.', 'start': 2514.78, 'duration': 2.042}, {'end': 2519.025, 'text': "We've also got the markdown PDF.", 'start': 2517.263, 'duration': 1.762}, {'end': 2527.975, 'text': "this is something I'm looking to try out myself to create an ebook where you can type markdown inside of VS code and then be able to export that to a PDF.", 'start': 2519.025, 'duration': 8.95}, {'end': 2531.459, 'text': 'Now speaking of markdown, just to kind of show you how this works.', 'start': 2528.516, 'duration': 2.943}, {'end': 2536.692, 'text': 'in VS code, you get some pretty good support for markdown right inside of here.', 'start': 2532.469, 'duration': 4.223}, {'end': 2539.353, 'text': 'So if I open a markdown file, here is the source.', 'start': 2536.752, 'duration': 2.601}], 'summary': 'Vs code offers various useful extensions for developers, like import cost and live share, improving productivity and efficiency.', 'duration': 61.167, 'max_score': 2478.186, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/WPqXP_kLzpo/pics/WPqXP_kLzpo2478186.jpg'}, {'end': 2655.479, 'src': 'embed', 'start': 2621.164, 'weight': 3, 'content': [{'end': 2623.646, 'text': 'And keyboard shortcuts in VS Code are really nice.', 'start': 2621.164, 'duration': 2.482}, {'end': 2627.627, 'text': 'I think this is a pretty powerful thing for you to be able to customize.', 'start': 2623.686, 'duration': 3.941}, {'end': 2632.929, 'text': 'So as you would probably expect, they have a list of commands that you can then add a key binding for.', 'start': 2627.667, 'duration': 5.262}, {'end': 2642.911, 'text': "So add cursor above, and then they show you the the shortcut here, let's do let's search for search, or actually, let's do a find.", 'start': 2633.089, 'duration': 9.822}, {'end': 2647.512, 'text': "So what is the shortcut for fine, we talked about this earlier, it's Command F or Ctrl F.", 'start': 2643.391, 'duration': 4.121}, {'end': 2655.479, 'text': "And then you can see there's also lots of different other options with find as well where you can find previous and next and so on.", 'start': 2649.417, 'duration': 6.062}], 'summary': 'Vs code offers customizable keyboard shortcuts for various commands, including command f or ctrl f for find.', 'duration': 34.315, 'max_score': 2621.164, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/WPqXP_kLzpo/pics/WPqXP_kLzpo2621164.jpg'}, {'end': 2794.272, 'src': 'embed', 'start': 2767.336, 'weight': 4, 'content': [{'end': 2773.038, 'text': "And then, if I press command in inside of here, it doesn't do exactly what I want, where it creates this new file,", 'start': 2767.336, 'duration': 5.702}, {'end': 2774.799, 'text': "but it doesn't have a name and it doesn't.", 'start': 2773.038, 'duration': 1.761}, {'end': 2776.479, 'text': "it's not in a directory anywhere.", 'start': 2774.799, 'duration': 1.68}, {'end': 2779.24, 'text': 'So I would then need to go and save that file directly.', 'start': 2776.519, 'duration': 2.721}, {'end': 2786.183, 'text': "So that's why I like having that advanced new file extension and then specifically set to that key binding.", 'start': 2779.28, 'duration': 6.903}, {'end': 2789.046, 'text': 'Now I can just update the one that is here.', 'start': 2786.863, 'duration': 2.183}, {'end': 2794.272, 'text': 'So this advanced new file, I can just do this and now say command in and that thing should be okay.', 'start': 2789.106, 'duration': 5.166}], 'summary': 'User prefers using advanced new file extension for efficient file creation.', 'duration': 26.936, 'max_score': 2767.336, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/WPqXP_kLzpo/pics/WPqXP_kLzpo2767336.jpg'}, {'end': 2874.513, 'src': 'embed', 'start': 2846.271, 'weight': 5, 'content': [{'end': 2851.875, 'text': 'But if we look at this last one, not only does it have a command and a key binding, it also has a win.', 'start': 2846.271, 'duration': 5.604}, {'end': 2859.221, 'text': 'Now, this is basically a win, is basically a state that you can use inside of VS code to determine when this shortcut should take place,', 'start': 2852.316, 'duration': 6.905}, {'end': 2862.363, 'text': 'which makes the combination of shortcuts very powerful.', 'start': 2859.221, 'duration': 3.142}, {'end': 2865.645, 'text': "So let's look up VS code shortcuts.", 'start': 2862.883, 'duration': 2.762}, {'end': 2868.768, 'text': 'And I want to show you just so you can be able to go out and look at these.', 'start': 2865.665, 'duration': 3.103}, {'end': 2874.513, 'text': 'later on for yourself, if you need to do some extra research on how to do this.', 'start': 2869.591, 'duration': 4.922}], 'summary': 'Vs code shortcuts use wins to determine when shortcuts take place, enhancing their power.', 'duration': 28.242, 'max_score': 2846.271, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/WPqXP_kLzpo/pics/WPqXP_kLzpo2846271.jpg'}, {'end': 3015.275, 'src': 'embed', 'start': 2994.463, 'weight': 6, 'content': [{'end': 3007.473, 'text': 'Well the sublime text key map and settings importer that can actually import settings from sublime and then also basically override all of your shortcuts to match what should have been or what would have been inside of sublime.', 'start': 2994.463, 'duration': 13.01}, {'end': 3010.153, 'text': "That way you can keep the same shortcuts that you're used to.", 'start': 3007.893, 'duration': 2.26}, {'end': 3013.615, 'text': 'And you can kind of go about your business just like you had in the past.', 'start': 3010.494, 'duration': 3.121}, {'end': 3015.275, 'text': "Now there's sublime.", 'start': 3014.215, 'duration': 1.06}], 'summary': 'A tool to import settings from sublime and override shortcuts, enabling users to maintain familiarity and work seamlessly.', 'duration': 20.812, 'max_score': 2994.463, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/WPqXP_kLzpo/pics/WPqXP_kLzpo2994463.jpg'}], 'start': 2478.186, 'title': 'Customizing vs code shortcuts', 'summary': 'Details the variety of extensions available in vs code, such as import cost, live share, and markdown pdf. it also explains the process of customizing keyboard shortcuts, including adding shortcuts to extensions, setting custom key bindings, and using conditional win clauses for tailored workflows.', 'chapters': [{'end': 2706.98, 'start': 2478.186, 'title': 'Vs code: extensions and keyboard shortcuts', 'summary': 'Discusses the variety of extensions available in vs code, including import cost, live share, and markdown pdf, while also highlighting the feature of customizing keyboard shortcuts, demonstrating the process and its potential benefits.', 'duration': 228.794, 'highlights': ['The VS Code extension ecosystem offers a variety of options, including Import Cost, Live Share, and Markdown PDF, catering to different developer needs and enhancing productivity.', 'Import Cost extension provides insight into the size of import statements in JavaScript, aiding in optimizing code and ensuring efficient import usage.', 'The Live Share extension facilitates real-time collaboration, enabling multiple users to work on the same codebase simultaneously, enhancing team productivity.', 'The Markdown PDF extension allows users to write Markdown in VS Code and export it as a PDF, offering a convenient method for creating ebooks or other documents.', 'Customizing keyboard shortcuts in VS Code provides a powerful tool for enhancing productivity, allowing users to assign key bindings to specific commands and customize their workflow.']}, {'end': 3033.601, 'start': 2708.16, 'title': 'Customizing vs code shortcuts', 'summary': 'Discusses the customization of keyboard shortcuts in vs code, including adding keyboard shortcuts to extensions, setting custom key bindings, and utilizing conditional win clauses to determine when shortcuts should be triggered, enabling users to tailor their shortcuts for a personalized workflow.', 'duration': 325.441, 'highlights': ['The advanced new file extension allows creating new files with a specific key binding, enhancing the workflow by immediately opening the created file inside VS Code without the need to save it directly. The advanced new file extension enables creating a new file with a specific key binding, immediately opening it inside VS Code, streamlining the workflow.', 'Utilizing conditional win clauses to determine when shortcuts should be triggered, providing the ability to customize the shortcuts based on various contexts such as the editor language, operating system, and editor focus. Conditional win clauses in VS Code allow customizing shortcuts based on different contexts like editor language, operating system, and editor focus, providing flexibility in shortcut customization.', 'The availability of key map extensions in the marketplace enables users to import settings from other text editors like Sublime, Notepad++, and Atom, allowing them to retain familiar shortcuts and seamlessly transition to using VS Code. Key map extensions in the marketplace facilitate importing settings from other text editors such as Sublime, Notepad++, and Atom, enabling users to retain familiar shortcuts and transition smoothly to using VS Code.']}], 'duration': 555.415, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/WPqXP_kLzpo/pics/WPqXP_kLzpo2478186.jpg', 'highlights': ['The Live Share extension facilitates real-time collaboration, enhancing team productivity.', 'The Import Cost extension provides insight into the size of import statements in JavaScript, aiding in optimizing code.', 'The Markdown PDF extension allows users to write Markdown in VS Code and export it as a PDF, offering a convenient method for creating ebooks or other documents.', 'Customizing keyboard shortcuts in VS Code provides a powerful tool for enhancing productivity.', 'The advanced new file extension allows creating new files with a specific key binding, streamlining the workflow.', 'Utilizing conditional win clauses in VS Code allows customizing shortcuts based on different contexts, providing flexibility in shortcut customization.', 'Key map extensions in the marketplace facilitate importing settings from other text editors, enabling users to retain familiar shortcuts.']}, {'end': 3530.406, 'segs': [{'end': 3098.541, 'src': 'embed', 'start': 3055.963, 'weight': 0, 'content': [{'end': 3063.799, 'text': "So if I type CLG, Notice VS Code is now popping up with this snippet here and it shows me what it's gonna output.", 'start': 3055.963, 'duration': 7.836}, {'end': 3065.44, 'text': "So it's gonna output a console.log.", 'start': 3063.839, 'duration': 1.601}, {'end': 3067.001, 'text': "So there's a snippet there.", 'start': 3065.46, 'duration': 1.541}, {'end': 3070.164, 'text': 'And we talked about all the IntelliSense that VS Code gives you.', 'start': 3067.542, 'duration': 2.622}, {'end': 3071.404, 'text': 'So if we do document.', 'start': 3070.204, 'duration': 1.2}, {'end': 3075.687, 'text': 'and then get element by ID, something like that, we can go ahead and complete.', 'start': 3071.464, 'duration': 4.223}, {'end': 3081.871, 'text': 'So VS Code gives you some built-in snippets and then some IntelliSense on knowing what functions and things are available.', 'start': 3075.727, 'duration': 6.144}, {'end': 3086.815, 'text': 'But if you wanna customize and add your own snippets, you can also do that.', 'start': 3082.332, 'duration': 4.483}, {'end': 3092.198, 'text': 'So the way that snippets work is snippets get stored inside of a JSON file.', 'start': 3087.375, 'duration': 4.823}, {'end': 3098.541, 'text': 'And if we click on the cogwheel and go to user snippets, or if we just open the command palette and open snippets as well.', 'start': 3092.638, 'duration': 5.903}], 'summary': 'Vs code provides built-in snippets and intellisense for customizing and adding snippets through a json file.', 'duration': 42.578, 'max_score': 3055.963, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/WPqXP_kLzpo/pics/WPqXP_kLzpo3055963.jpg'}, {'end': 3229.419, 'src': 'embed', 'start': 3204.647, 'weight': 4, 'content': [{'end': 3211.91, 'text': 'I might want to actually end with my cursor in the middle so that I can type in the input for that console log.', 'start': 3204.647, 'duration': 7.263}, {'end': 3215.171, 'text': 'So one of the things you can do is something called tab stops.', 'start': 3212.43, 'duration': 2.741}, {'end': 3223.035, 'text': "So if I do a dot or a dollar sign one here, This is saying that I'm going to be entering in some pieces of information.", 'start': 3215.231, 'duration': 7.804}, {'end': 3225.016, 'text': "And this is the first one that I'm going to enter.", 'start': 3223.195, 'duration': 1.821}, {'end': 3229.419, 'text': 'So now if I do the same thing, jqqc log and press enter.', 'start': 3225.557, 'duration': 3.862}], 'summary': 'Demonstrating the use of tab stops for entering information in a console log.', 'duration': 24.772, 'max_score': 3204.647, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/WPqXP_kLzpo/pics/WPqXP_kLzpo3204647.jpg'}, {'end': 3310.36, 'src': 'embed', 'start': 3285.543, 'weight': 5, 'content': [{'end': 3292.088, 'text': 'So, after you finish all of your tab stops, that are one through x or y or n, or however many you do, dollar sign,', 'start': 3285.543, 'duration': 6.545}, {'end': 3293.85, 'text': 'zero is going to be the very last snippet.', 'start': 3292.088, 'duration': 1.762}, {'end': 3297.772, 'text': "So that's going to be where your cursor goes after you finished all the previous tab stops.", 'start': 3293.87, 'duration': 3.902}, {'end': 3302.755, 'text': "So let's save this, let's do the same, this will do the same thing, I just want to show you the tab stop of zero there.", 'start': 3298.472, 'duration': 4.283}, {'end': 3310.36, 'text': 'So jqq CLG, and type in my object and then return or tab actually, and that will bring me down to this next line.', 'start': 3302.795, 'duration': 7.565}], 'summary': 'Demonstrates the use of tab stops, with zero as the last snippet, bringing the cursor to the end.', 'duration': 24.817, 'max_score': 3285.543, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/WPqXP_kLzpo/pics/WPqXP_kLzpo3285543.jpg'}, {'end': 3346.544, 'src': 'embed', 'start': 3320.785, 'weight': 1, 'content': [{'end': 3326.727, 'text': "And I do this a lot where if you're using environment variables, you have to type out process dot env dot something.", 'start': 3320.785, 'duration': 5.942}, {'end': 3328.448, 'text': "And maybe you don't want to have to do that.", 'start': 3327.208, 'duration': 1.24}, {'end': 3332.63, 'text': 'So I created this, this extension, the snippet, that is just env.', 'start': 3328.508, 'duration': 4.122}, {'end': 3334.691, 'text': 'And that will replace it with process dot env.', 'start': 3332.65, 'duration': 2.041}, {'end': 3337.512, 'text': "And then I can type in the actual variable that I'm working with.", 'start': 3335.031, 'duration': 2.481}, {'end': 3346.544, 'text': "Alright, and if I scroll up a little bit, let's scroll up to the top a couple of the ones that I like here is a use state hook and react.", 'start': 3338.7, 'duration': 7.844}], 'summary': "Created 'env' extension to replace 'process.env' for efficiency.", 'duration': 25.759, 'max_score': 3320.785, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/WPqXP_kLzpo/pics/WPqXP_kLzpo3320785.jpg'}], 'start': 3033.601, 'title': 'Customizing shortcuts and snippets in vs code', 'summary': 'Covers customizing shortcuts and snippets in vs code, including creating custom snippets for code and practical examples such as environment variables and event listeners, offering a convenient and efficient way for coding.', 'chapters': [{'end': 3302.755, 'start': 3033.601, 'title': 'Customizing shortcuts and snippets in vs code', 'summary': 'Covers how to customize shortcuts and snippets in vs code, including creating custom snippets for code, with examples like creating a custom console log snippet, using tab stops for user input, and understanding the dollar sign zero as the final cursor position after using tab stops.', 'duration': 269.154, 'highlights': ['Creating custom snippets for code The transcript explains how to create custom snippets for code in VS Code, with an example of creating a custom console log snippet.', 'Using tab stops for user input Tab stops are discussed as a method for allowing user input within snippets, demonstrated by setting the cursor position for user input in a custom console log snippet.', 'Understanding the dollar sign zero as the final cursor position after using tab stops The transcript explains the significance of the dollar sign zero as the final cursor position after using tab stops within custom snippets.']}, {'end': 3530.406, 'start': 3302.795, 'title': 'Vs code snippets and practical examples', 'summary': 'Discusses the usage of vs code snippets for practical examples including environment variables, multi-line snippets, and event listeners, providing a convenient and efficient way for coding.', 'duration': 227.611, 'highlights': ['The usage of VS Code snippets for practical examples The transcript highlights the usage of VS Code snippets for practical coding examples, including environment variables, multi-line snippets, and event listeners, providing a convenient and efficient way for coding.', 'Creation of custom VS Code snippets for environment variables and for loops The speaker created custom VS Code snippets for environment variables and for loops to simplify the coding process and increase efficiency.', 'Utilizing VS Code snippets for event listeners and fetch requests The transcript mentions the usage of VS Code snippets for event listeners and fetch requests, showcasing the practical application of these snippets for common coding tasks.']}], 'duration': 496.805, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/WPqXP_kLzpo/pics/WPqXP_kLzpo3033601.jpg', 'highlights': ['The usage of VS Code snippets for practical examples The transcript highlights the usage of VS Code snippets for practical coding examples, including environment variables, multi-line snippets, and event listeners, providing a convenient and efficient way for coding.', 'Creation of custom VS Code snippets for environment variables and for loops The speaker created custom VS Code snippets for environment variables and for loops to simplify the coding process and increase efficiency.', 'Utilizing VS Code snippets for event listeners and fetch requests The transcript mentions the usage of VS Code snippets for event listeners and fetch requests, showcasing the practical application of these snippets for common coding tasks.', 'Creating custom snippets for code The transcript explains how to create custom snippets for code in VS Code, with an example of creating a custom console log snippet.', 'Using tab stops for user input Tab stops are discussed as a method for allowing user input within snippets, demonstrated by setting the cursor position for user input in a custom console log snippet.', 'Understanding the dollar sign zero as the final cursor position after using tab stops The transcript explains the significance of the dollar sign zero as the final cursor position after using tab stops within custom snippets.']}, {'end': 4343.873, 'segs': [{'end': 3576.384, 'src': 'embed', 'start': 3549.746, 'weight': 6, 'content': [{'end': 3554.31, 'text': 'So I would say snippets are one of the most powerful features inside of VS Code.', 'start': 3549.746, 'duration': 4.564}, {'end': 3559.433, 'text': 'Anytime. you see yourself writing a bunch of code over and over again and it never really changes.', 'start': 3554.49, 'duration': 4.943}, {'end': 3561.675, 'text': "you might think about, or a lot of it doesn't change.", 'start': 3559.433, 'duration': 2.242}, {'end': 3570.541, 'text': 'You might think about how to use snippets or define snippets inside of your snippets JSON file so that you can save yourself some time and effort later on.', 'start': 3562.135, 'duration': 8.406}, {'end': 3576.384, 'text': "Alright, now that we've talked about settings and themes and a bunch of different aspects of VS code,", 'start': 3571.261, 'duration': 5.123}], 'summary': 'Vs code snippets can save time by reusing code, enhancing efficiency.', 'duration': 26.638, 'max_score': 3549.746, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/WPqXP_kLzpo/pics/WPqXP_kLzpo3549746.jpg'}, {'end': 3608.384, 'src': 'embed', 'start': 3587.271, 'weight': 3, 'content': [{'end': 3596.221, 'text': "where you could download this extension and it would save all of the customizations that you've done inside of VS code into a gist inside of GitHub.", 'start': 3587.271, 'duration': 8.95}, {'end': 3605.163, 'text': 'And what I mean is it will take all of your configurations, your snippets, your shortcuts, your settings, your extensions.', 'start': 3597.463, 'duration': 7.7}, {'end': 3608.384, 'text': 'it will take all of those things and then save them basically in a file.', 'start': 3605.163, 'duration': 3.221}], 'summary': 'Extension saves vs code customizations to github gist.', 'duration': 21.113, 'max_score': 3587.271, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/WPqXP_kLzpo/pics/WPqXP_kLzpo3587271.jpg'}, {'end': 3654.929, 'src': 'embed', 'start': 3628.055, 'weight': 7, 'content': [{'end': 3633.038, 'text': 'So I scroll down to just and then come down here to cloud settings.', 'start': 3628.055, 'duration': 4.983}, {'end': 3637.9, 'text': 'Now this is where the settings sync extension will save all of those things.', 'start': 3633.098, 'duration': 4.802}, {'end': 3641.782, 'text': "And if I open this up, you'll notice I have a few different files.", 'start': 3638.981, 'duration': 2.801}, {'end': 3643.343, 'text': "So I've got cloud settings.", 'start': 3642.222, 'duration': 1.121}, {'end': 3648.726, 'text': 'This is just for like metadata of when the last time I updated and what version I think I was on for that extension.', 'start': 3643.383, 'duration': 5.343}, {'end': 3652.768, 'text': "And then I've got a file here for all the different extensions that I use.", 'start': 3649.306, 'duration': 3.462}, {'end': 3654.929, 'text': 'Actually, I think this is not the correct one.', 'start': 3652.888, 'duration': 2.041}], 'summary': 'Configuring cloud settings for extensions and metadata storage.', 'duration': 26.874, 'max_score': 3628.055, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/WPqXP_kLzpo/pics/WPqXP_kLzpo3628055.jpg'}, {'end': 3758.285, 'src': 'embed', 'start': 3721.449, 'weight': 0, 'content': [{'end': 3727.633, 'text': "And notice inside of VS code, this is what you'll see when you open up your settings window, you'll see this button here for turn on settings sync.", 'start': 3721.449, 'duration': 6.184}, {'end': 3737.98, 'text': 'Now what this is going to do is VS code is basically going to manage all this stuff for you behind the scenes and make sure that it does the same thing that we just talked about with this third party extension,', 'start': 3728.193, 'duration': 9.787}, {'end': 3739.061, 'text': 'but built into VS code.', 'start': 3737.98, 'duration': 1.081}, {'end': 3744.743, 'text': 'So I click on turn on setting sync, it asks me what things I want to actually synchronize.', 'start': 3739.081, 'duration': 5.662}, {'end': 3749.504, 'text': 'And this is yes, my settings, my shortcuts, my user snippets, my extensions, my UI state.', 'start': 3745.103, 'duration': 4.401}, {'end': 3751.884, 'text': "So I'll select all those and I click turn on.", 'start': 3749.884, 'duration': 2}, {'end': 3755.825, 'text': "And then you'll either have to log in with your GitHub or your Microsoft account.", 'start': 3752.444, 'duration': 3.381}, {'end': 3758.285, 'text': "Now I've already logged in, in the past.", 'start': 3755.905, 'duration': 2.38}], 'summary': 'Vs code can sync settings, snippets, extensions, ui state with github or microsoft account.', 'duration': 36.836, 'max_score': 3721.449, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/WPqXP_kLzpo/pics/WPqXP_kLzpo3721449.jpg'}, {'end': 3823.621, 'src': 'embed', 'start': 3795.996, 'weight': 4, 'content': [{'end': 3800.421, 'text': 'as well as the machines that are synced with this setting or with these settings.', 'start': 3795.996, 'duration': 4.425}, {'end': 3808.348, 'text': 'So if I had VS Code on multiple different machines, I would see in here which ones are synchronized.', 'start': 3800.881, 'duration': 7.467}, {'end': 3809.99, 'text': 'I could refresh this to get a new list.', 'start': 3808.348, 'duration': 1.642}, {'end': 3813.873, 'text': "I could edit this name so that I could be more specific about which one I'm working with.", 'start': 3809.99, 'duration': 3.883}, {'end': 3817.216, 'text': 'And then I can also turn off setting sync on different ones.', 'start': 3814.313, 'duration': 2.903}, {'end': 3823.621, 'text': "So if I didn't want all of my things to be synced across different instances of VS code,", 'start': 3817.256, 'duration': 6.365}], 'summary': 'Vs code allows syncing settings across multiple machines, enabling users to manage and customize their preferences efficiently.', 'duration': 27.625, 'max_score': 3795.996, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/WPqXP_kLzpo/pics/WPqXP_kLzpo3795996.jpg'}, {'end': 3951.294, 'src': 'heatmap', 'start': 3887.486, 'weight': 1, 'content': [{'end': 3890.389, 'text': "There's the VS code, which one is this, let's make this a little bit bigger.", 'start': 3887.486, 'duration': 2.903}, {'end': 3894.312, 'text': "So Mac number one, that's the current and there's the insiders Mac over here.", 'start': 3890.849, 'duration': 3.463}, {'end': 3895.814, 'text': 'So those things are synced.', 'start': 3894.793, 'duration': 1.021}, {'end': 3904.58, 'text': "And what's cool is if I come in and search for theme, and then go to toggle my theme, and I want to change it to something what crackpot contrast.", 'start': 3895.894, 'duration': 8.686}, {'end': 3905.36, 'text': "Sure, let's do that.", 'start': 3904.62, 'duration': 0.74}, {'end': 3906.52, 'text': 'And press enter.', 'start': 3905.8, 'duration': 0.72}, {'end': 3907.78, 'text': 'Notice it changed over here.', 'start': 3906.58, 'duration': 1.2}, {'end': 3912.822, 'text': 'And then if I scroll back over, it should change on this instance of VS code as well.', 'start': 3908.001, 'duration': 4.821}, {'end': 3916.003, 'text': 'So notice, it took a few seconds, but that came through really, really cool.', 'start': 3912.862, 'duration': 3.141}, {'end': 3919.784, 'text': 'And then I could change this back to cobalt two.', 'start': 3916.443, 'duration': 3.341}, {'end': 3924.385, 'text': 'And then this should be able to now update over here in a few seconds as well.', 'start': 3920.304, 'duration': 4.081}, {'end': 3926.265, 'text': 'And you saw that come through.', 'start': 3925.385, 'duration': 0.88}, {'end': 3929.546, 'text': 'So the settings sync extension is super, super powerful.', 'start': 3926.645, 'duration': 2.901}, {'end': 3930.267, 'text': "It's really cool.", 'start': 3929.626, 'duration': 0.641}, {'end': 3935.829, 'text': 'Because now real time, you can see these things change and make sure that you never miss any of your settings in VS code.', 'start': 3930.307, 'duration': 5.522}, {'end': 3940.03, 'text': 'Alright, now I want to take a look at debugging inside of VS code.', 'start': 3936.589, 'duration': 3.441}, {'end': 3944.111, 'text': 'This is one of the most powerful and probably underrated features in VS code.', 'start': 3940.05, 'duration': 4.061}, {'end': 3951.294, 'text': "So I'm going to open up this this project here, which is a vanilla HTML, CSS and JavaScript project, I'm going to open this one up.", 'start': 3944.612, 'duration': 6.682}], 'summary': 'Vs code settings sync extension allows real-time syncing of settings across instances, enhancing productivity and ensuring no settings are missed. debugging in vs code is a powerful and underrated feature.', 'duration': 63.808, 'max_score': 3887.486, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/WPqXP_kLzpo/pics/WPqXP_kLzpo3887486.jpg'}, {'end': 4250.839, 'src': 'embed', 'start': 4220.574, 'weight': 2, 'content': [{'end': 4222.035, 'text': 'I could see this inside of my watch.', 'start': 4220.574, 'duration': 1.461}, {'end': 4227.099, 'text': 'So overall, debugging in VS code is very powerful.', 'start': 4223.516, 'duration': 3.583}, {'end': 4230.902, 'text': "It's one of those features that is highly underrated and very, very useful for you.", 'start': 4227.179, 'duration': 3.723}, {'end': 4234.345, 'text': 'So that is an example of debugging kind of vanilla JavaScript.', 'start': 4231.503, 'duration': 2.842}, {'end': 4238.848, 'text': 'I also want to show you an example of debugging something in node as well.', 'start': 4234.405, 'duration': 4.443}, {'end': 4242.371, 'text': "Alright, so I've got a new application open.", 'start': 4238.868, 'duration': 3.503}, {'end': 4247.496, 'text': 'This is design and build a chat app with socket IO and node js.', 'start': 4242.551, 'duration': 4.945}, {'end': 4250.839, 'text': "So you can actually grab this code on GitHub if you're interested.", 'start': 4247.816, 'duration': 3.023}], 'summary': 'Debugging in vs code is powerful and useful for vanilla javascript and node.js applications.', 'duration': 30.265, 'max_score': 4220.574, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/WPqXP_kLzpo/pics/WPqXP_kLzpo4220574.jpg'}], 'start': 3530.406, 'title': 'Vs code features, setting sync, and debugging', 'summary': 'Explores the powerful features of vs code, such as snippets, and the setting sync extension that saves customizations into a github gist, enabling synchronization of settings across instances. it also delves into the built-in setting sync feature, demonstrating its capabilities in synchronizing settings, shortcuts, snippets, and extensions across instances. furthermore, it showcases the robust debugging capabilities of vs code for vanilla javascript and node.js applications.', 'chapters': [{'end': 3664.935, 'start': 3530.406, 'title': 'Vs code features and setting sync', 'summary': 'Discusses the powerful features of vs code, including the use of snippets and the setting sync extension which saves customizations into a github gist, providing the ability to sync settings across different instances of vs code.', 'duration': 134.529, 'highlights': ['Snippets are one of the most powerful features inside of VS Code, saving time and effort when writing repetitive code. Power of snippets in VS Code, time-saving and efficiency improvement', 'The setting sync extension saves all customizations (configurations, snippets, shortcuts, settings, extensions) into a GitHub gist, allowing for syncing settings across different instances of VS Code. Functionality of setting sync extension, syncing settings across different instances of VS Code', 'The setting sync extension creates a file in the GitHub gist for metadata and saves extensions in a separate file. Structure and storage of files created by setting sync extension']}, {'end': 4343.873, 'start': 3665.555, 'title': 'Vs code setting sync and debugging', 'summary': 'Explains the built-in setting sync feature in vs code, which allows synchronization of settings, shortcuts, snippets, extensions, ui state across different instances of vs code, eliminating the need for third-party extensions. additionally, it demonstrates the powerful debugging capabilities of vs code for vanilla javascript and node.js applications.', 'duration': 678.318, 'highlights': ['Built-in setting sync feature in VS Code VS Code now includes a built-in setting sync feature that enables the synchronization of settings, shortcuts, snippets, extensions, and UI state across different instances of VS Code, reducing the reliance on third-party extensions like setting sync extension.', 'Demonstration of setting sync process The process of turning on setting sync, selecting items to synchronize (settings, shortcuts, user snippets, extensions, UI state), and the integration with GitHub/Microsoft account for synchronization are demonstrated, providing a seamless and efficient way to manage settings across different machines.', 'Real-time synchronization and multiple machine sync The ability to view recent synchronizations, machines synced with the settings, and the option to edit machine names and selectively turn off setting sync on different instances, with real-time updates, provides control and visibility over the synchronization process.', 'Debugging capabilities of VS Code for vanilla JavaScript applications The chapter illustrates the powerful debugging capabilities of VS Code for vanilla JavaScript applications, showcasing features such as setting breakpoints, stepping through code, inspecting variables, and real-time debugging, demonstrating the effectiveness of true debugging over console log statements.', 'Debugging functionality for Node.js applications The debugging functionality for Node.js applications is explained, including the process of setting breakpoints, inspecting variables, utilizing the call stack, and the ability to step through code, showcasing the versatility and effectiveness of VS Code for debugging Node.js applications.']}], 'duration': 813.467, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/WPqXP_kLzpo/pics/WPqXP_kLzpo3530406.jpg', 'highlights': ['Built-in setting sync feature in VS Code enables synchronization of settings, shortcuts, snippets, extensions, and UI state across instances, reducing reliance on third-party extensions.', 'Demonstration of setting sync process includes turning on setting sync, selecting items to synchronize, and integrating with GitHub/Microsoft account for seamless management of settings across machines.', 'Debugging capabilities of VS Code for vanilla JavaScript applications showcase features like setting breakpoints, stepping through code, inspecting variables, and real-time debugging, demonstrating true debugging effectiveness.', 'The setting sync extension in VS Code saves all customizations into a GitHub gist, allowing for syncing settings, snippets, shortcuts, and extensions across different instances, enhancing efficiency and consistency.', 'Real-time synchronization and multiple machine sync provide control and visibility over the synchronization process, allowing for viewing recent synchronizations, editing machine names, and selectively turning off setting sync.', 'Debugging functionality for Node.js applications in VS Code includes setting breakpoints, inspecting variables, utilizing the call stack, and stepping through code, showcasing the versatility and effectiveness of VS Code for debugging Node.js applications.', 'Snippets in VS Code are powerful, saving time and effort when writing repetitive code, contributing to efficiency improvement and time-saving benefits.', 'The setting sync extension creates a file in the GitHub gist for metadata and saves extensions in a separate file, providing insights into the structure and storage of files created by the setting sync extension.']}, {'end': 5554.113, 'segs': [{'end': 4414.679, 'src': 'embed', 'start': 4384.955, 'weight': 8, 'content': [{'end': 4387.318, 'text': 'So I use an application called hyper.', 'start': 4384.955, 'duration': 2.363}, {'end': 4388.72, 'text': "That's what I use for my terminal.", 'start': 4387.419, 'duration': 1.301}, {'end': 4392.606, 'text': "And if you're on Mac, you'll have like the built in Mac terminal.", 'start': 4389.501, 'duration': 3.105}, {'end': 4399.331, 'text': "If you're on Windows, you might have might have PowerShell or command prompt or get bash or things like that.", 'start': 4392.646, 'duration': 6.685}, {'end': 4400.932, 'text': 'But this is my terminal.', 'start': 4399.371, 'duration': 1.561}, {'end': 4404.774, 'text': 'And it uses zsh instead of bash.', 'start': 4401.572, 'duration': 3.202}, {'end': 4407.556, 'text': 'So zsh is actually the default shell on my computer.', 'start': 4404.794, 'duration': 2.762}, {'end': 4409.897, 'text': 'So yours will pick up your default shell.', 'start': 4407.916, 'duration': 1.981}, {'end': 4414.679, 'text': 'And I think this is zsh has probably become the default shell on Mac in the last couple of months.', 'start': 4409.917, 'duration': 4.762}], 'summary': 'The speaker uses hyper application on mac with zsh, now the default shell on mac.', 'duration': 29.724, 'max_score': 4384.955, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/WPqXP_kLzpo/pics/WPqXP_kLzpo4384955.jpg'}, {'end': 4449.865, 'src': 'embed', 'start': 4422.011, 'weight': 3, 'content': [{'end': 4428.175, 'text': 'But this is going to open up and have basically the same experience that you would have inside of your regular terminal, which is really, really nice.', 'start': 4422.011, 'duration': 6.164}, {'end': 4432.337, 'text': 'Now a couple of things I want to show you on here is, you can have multiple instances of your terminal.', 'start': 4428.615, 'duration': 3.722}, {'end': 4434.278, 'text': 'you can set them side by side, which is kind of cool.', 'start': 4432.337, 'duration': 1.941}, {'end': 4436.099, 'text': "I don't really use this myself.", 'start': 4434.739, 'duration': 1.36}, {'end': 4443.959, 'text': 'And the reason is that I end up having multiple tabs inside of my terminal, but not side by side.', 'start': 4436.259, 'duration': 7.7}, {'end': 4445.66, 'text': 'So what I mean is let me kill this one.', 'start': 4443.999, 'duration': 1.661}, {'end': 4449.865, 'text': 'If I do the plus over here, this is going to do a new tab.', 'start': 4446.461, 'duration': 3.404}], 'summary': 'New terminal feature allows multiple instances and side-by-side tabs.', 'duration': 27.854, 'max_score': 4422.011, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/WPqXP_kLzpo/pics/WPqXP_kLzpo4422011.jpg'}, {'end': 4558.416, 'src': 'embed', 'start': 4531.178, 'weight': 7, 'content': [{'end': 4535.501, 'text': "So again, I've done some customization to make sure that this works exactly how I would expect.", 'start': 4531.178, 'duration': 4.323}, {'end': 4541.825, 'text': 'And the other thing I think you should know is that control and tilde will toggle open this terminal.', 'start': 4535.601, 'duration': 6.224}, {'end': 4546.188, 'text': 'So we mentioned early on that I use command or control B to close that side panel.', 'start': 4542.205, 'duration': 3.983}, {'end': 4550.011, 'text': 'I also do control and tilde to open and close the terminal.', 'start': 4546.568, 'duration': 3.443}, {'end': 4552.472, 'text': 'That way I can have a lot of space for my code.', 'start': 4550.391, 'duration': 2.081}, {'end': 4555.254, 'text': 'If I need the terminal, I do control tilde.', 'start': 4552.833, 'duration': 2.421}, {'end': 4558.416, 'text': 'And then if I need the sidebar, I do command B.', 'start': 4555.594, 'duration': 2.822}], 'summary': 'Customized shortcuts for efficient coding: control/tilde toggles terminal, command b for sidebar', 'duration': 27.238, 'max_score': 4531.178, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/WPqXP_kLzpo/pics/WPqXP_kLzpo4531178.jpg'}, {'end': 4598.774, 'src': 'embed', 'start': 4571.221, 'weight': 5, 'content': [{'end': 4574.563, 'text': "So if we search terminal and then I'm going to click on the terminal category here.", 'start': 4571.221, 'duration': 3.342}, {'end': 4575.183, 'text': 'All right.', 'start': 4574.583, 'duration': 0.6}, {'end': 4581.145, 'text': 'If I scroll down and start to look at some of the settings associated with terminal, keep scrolling down.', 'start': 4575.243, 'duration': 5.902}, {'end': 4582.465, 'text': "Let's get to some of the fun ones.", 'start': 4581.165, 'duration': 1.3}, {'end': 4585.846, 'text': 'One, you can customize what your shell is.', 'start': 4583.165, 'duration': 2.681}, {'end': 4590.048, 'text': "So if you want to customize that based on the operating system that you're on, you can do that.", 'start': 4586.267, 'duration': 3.781}, {'end': 4593.13, 'text': "So let's look at there's a cursor style.", 'start': 4590.808, 'duration': 2.322}, {'end': 4598.774, 'text': 'So we can have the block or a line and notice this becomes a lot thinner, you can have a cursor width.', 'start': 4593.27, 'duration': 5.504}], 'summary': 'Customize terminal settings including shell and cursor style.', 'duration': 27.553, 'max_score': 4571.221, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/WPqXP_kLzpo/pics/WPqXP_kLzpo4571221.jpg'}, {'end': 4719.549, 'src': 'embed', 'start': 4692.566, 'weight': 2, 'content': [{'end': 4699.534, 'text': 'So anyway, inside of your built in terminal one, I would recommend knowing how to toggle that open and close,', 'start': 4692.566, 'duration': 6.968}, {'end': 4701.156, 'text': 'so you only have it open when you need it.', 'start': 4699.534, 'duration': 1.622}, {'end': 4707.283, 'text': 'Know that you can create multiple instances of your terminal by adding the plus or by setting them side by side.', 'start': 4701.577, 'duration': 5.706}, {'end': 4711.108, 'text': 'You can close them, you can make this full screen, close that back down here.', 'start': 4707.664, 'duration': 3.444}, {'end': 4719.549, 'text': "And once you get used to kind of navigating that and working with it alongside of your code, I think you'll really, really enjoy it the way that I do.", 'start': 4712.947, 'duration': 6.602}], 'summary': 'Learn to toggle and manage multiple instances of the built-in terminal for efficient coding.', 'duration': 26.983, 'max_score': 4692.566, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/WPqXP_kLzpo/pics/WPqXP_kLzpo4692566.jpg'}, {'end': 5012.774, 'src': 'embed', 'start': 4984.435, 'weight': 4, 'content': [{'end': 4988.636, 'text': 'And now if we refresh that repository, we see that stuff got added up here.', 'start': 4984.435, 'duration': 4.201}, {'end': 4992.238, 'text': 'So from inside of VS code, I can do my basic git workflow.', 'start': 4988.977, 'duration': 3.261}, {'end': 4999.703, 'text': 'And then I can also create repositories inside of GitHub instead of having to go to GitHub directly.', 'start': 4992.638, 'duration': 7.065}, {'end': 5001.725, 'text': 'This is really, really powerful.', 'start': 5000.364, 'duration': 1.361}, {'end': 5004.207, 'text': 'And I want to scroll back over to my project here.', 'start': 5001.865, 'duration': 2.342}, {'end': 5010.232, 'text': "If we look at I've got some things that have changed, I've got a launch JSON, this is for that debugging stuff that we checked out.", 'start': 5004.667, 'duration': 5.565}, {'end': 5012.774, 'text': "And then I've made some changes if we scroll down.", 'start': 5010.673, 'duration': 2.101}], 'summary': 'Using vs code for git workflow, creating repositories in github, and making changes to files.', 'duration': 28.339, 'max_score': 4984.435, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/WPqXP_kLzpo/pics/WPqXP_kLzpo4984435.jpg'}, {'end': 5068.464, 'src': 'embed', 'start': 5041.092, 'weight': 1, 'content': [{'end': 5045.934, 'text': 'Now, one thing I do wanna show you on top of that is VS Code has some amazing built-in support for Git,', 'start': 5041.092, 'duration': 4.842}, {'end': 5048.776, 'text': 'but it also has extensions that can help you as well.', 'start': 5045.934, 'duration': 2.842}, {'end': 5052.458, 'text': 'And GitLens to me is the most powerful extension out there.', 'start': 5049.296, 'duration': 3.162}, {'end': 5055.139, 'text': "You can look at, let's open a file and see this.", 'start': 5052.958, 'duration': 2.181}, {'end': 5061.042, 'text': 'So if I open that app.js and then open up the GitLens extension, I can see the file history.', 'start': 5055.199, 'duration': 5.843}, {'end': 5062.822, 'text': 'So what the different commits were.', 'start': 5061.122, 'duration': 1.7}, {'end': 5068.464, 'text': 'If I select a line, I can see the history based on that line and the different commits that were made with that.', 'start': 5063.142, 'duration': 5.322}], 'summary': 'Vs code has strong git support with gitlens extension for file history and commit details.', 'duration': 27.372, 'max_score': 5041.092, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/WPqXP_kLzpo/pics/WPqXP_kLzpo5041092.jpg'}, {'end': 5320.625, 'src': 'embed', 'start': 5278.993, 'weight': 0, 'content': [{'end': 5284.82, 'text': 'So if I use this pin, I can follow this person around as they scroll through code and change files.', 'start': 5278.993, 'duration': 5.827}, {'end': 5288.905, 'text': "Notice that scrolling and changing files and I'm not even doing anything.", 'start': 5284.88, 'duration': 4.025}, {'end': 5294.174, 'text': 'So one person could kind of teach and show and walk through code.', 'start': 5289.386, 'duration': 4.788}, {'end': 5296.695, 'text': 'While the other person just follows.', 'start': 5295.014, 'duration': 1.681}, {'end': 5297.655, 'text': 'you could turn that off.', 'start': 5296.695, 'duration': 0.96}, {'end': 5300.356, 'text': 'you could both both work on code at the same time.', 'start': 5297.655, 'duration': 2.701}, {'end': 5301.877, 'text': 'you can share a terminal.', 'start': 5300.356, 'duration': 1.521}, {'end': 5304.418, 'text': 'you can do all sorts of things with VS code live share.', 'start': 5301.877, 'duration': 2.541}, {'end': 5310.56, 'text': 'this is such a cool extension to have enabled for you to do peer programming with someone across the world,', 'start': 5304.418, 'duration': 6.142}, {'end': 5313.821, 'text': "or someone that's maybe on the same computer as I'm doing in this demo.", 'start': 5310.56, 'duration': 3.261}, {'end': 5320.625, 'text': 'Regardless of how you use it, this is one of the coolest and most powerful features inside of VS code, you should definitely check it out.', 'start': 5314.282, 'duration': 6.343}], 'summary': 'Vs code live share allows peer programming across the world, enabling collaborative code editing and sharing a terminal.', 'duration': 41.632, 'max_score': 5278.993, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/WPqXP_kLzpo/pics/WPqXP_kLzpo5278993.jpg'}], 'start': 4344.273, 'title': 'Vs code terminal and extensions', 'summary': "Discusses the benefits of using vs code's built-in terminal, customizing terminal settings, git integration, and the live share extension, enabling real-time code collaboration and enhancing productivity.", 'chapters': [{'end': 4421.631, 'start': 4344.273, 'title': 'Vs code built-in terminal and shell preferences', 'summary': "Discusses the advantages of using the built-in terminal in vs code and the author's personal preference for it, while also mentioning the flexibility to use different shells such as zsh and how to change the default shell.", 'duration': 77.358, 'highlights': ['VS code has a built in terminal The chapter highlights the presence of a built-in terminal in VS code, which provides convenience and eliminates the need for separate terminal applications.', "Author's preference for the built-in terminal in VS code The author expresses a personal preference for using the terminal built into VS code, citing the convenience of performing all tasks within the editor without relying on external applications.", "Discussion of using different shells such as zsh The chapter discusses the use of different shells, specifically mentioning the author's use of zsh and the ability to select the default shell if needed."]}, {'end': 4674.302, 'start': 4422.011, 'title': 'Customizing terminal in vs code', 'summary': 'Discusses customizing the terminal in vs code, including setting up multiple instances, customizing shortcuts, adjusting terminal settings, and changing features like shell, cursor style, font, and location.', 'duration': 252.291, 'highlights': ['You can set multiple instances of the terminal side by side, customize shortcuts, and adjust various settings such as shell, cursor style, font, and location. Multiple instances, shortcuts customization, terminal settings adjustment', 'Customizing shortcuts for navigating between different files in the terminal, and using control and tilde to toggle open and close the terminal for more space. Custom shortcuts for navigating, control and tilde usage', 'Discussion on customizing terminal settings such as shell, cursor style, font family, font size, font weight, letter spacing, and terminal position. Customizing terminal settings']}, {'end': 5117.512, 'start': 4674.362, 'title': 'Vs code: git integration and terminal usage', 'summary': 'Covers the functionality of the built-in terminal, git integration, and the use of vs code for pushing code to github, emphasizing features such as toggling terminal open and close, creating and managing multiple terminal instances, initializing and pushing code to a github repository directly from vs code, and leveraging gitlens extension for advanced git support.', 'duration': 443.15, 'highlights': ['VS Code allows toggling the built-in terminal open and close, creating multiple instances, and making it full screen Users can efficiently manage the built-in terminal by toggling it open and close, creating multiple instances, and maximizing its display for better workflow flexibility.', 'VS Code enables initializing and pushing code to a GitHub repository directly from the interface VS Code streamlines the process of initializing a repository and pushing code to GitHub by allowing users to perform these actions directly from the interface, saving time and simplifying the workflow.', 'GitLens extension provides advanced Git support including file history, line-specific commit details, and integration with GitHub The GitLens extension in VS Code offers comprehensive support for Git operations, including viewing file history, line-specific commit details, and seamless integration with GitHub, enhancing the overall Git workflow experience.']}, {'end': 5554.113, 'start': 5117.592, 'title': 'Vs code live share extension', 'summary': 'Covers the vs code live share extension, allowing real-time code sharing and peer programming, with features like shared cursor, file navigation, and terminal sharing, enhancing collaboration and productivity.', 'duration': 436.521, 'highlights': ['VS Code Live Share extension enables real-time code sharing and peer programming, allowing collaboration across the world. Real-time code sharing, peer programming, collaboration across the world', 'The extension features shared cursor and file navigation, allowing real-time tracking and navigation of code changes. Shared cursor, file navigation, real-time tracking of code changes', 'Terminal sharing is supported, enabling collaborative debugging and execution of code within the same editor. Terminal sharing, collaborative debugging, execution of code within the same editor']}], 'duration': 1209.84, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/WPqXP_kLzpo/pics/WPqXP_kLzpo4344273.jpg', 'highlights': ['VS Code Live Share extension enables real-time code sharing and peer programming, allowing collaboration across the world', 'GitLens extension provides advanced Git support including file history, line-specific commit details, and integration with GitHub', 'VS Code allows toggling the built-in terminal open and close, creating multiple instances, and making it full screen', 'You can set multiple instances of the terminal side by side, customize shortcuts, and adjust various settings such as shell, cursor style, font, and location', 'VS Code enables initializing and pushing code to a GitHub repository directly from the interface', 'Discussion on customizing terminal settings such as shell, cursor style, font family, font size, font weight, letter spacing, and terminal position', 'Terminal sharing is supported, enabling collaborative debugging and execution of code within the same editor', 'Customizing shortcuts for navigating between different files in the terminal, and using control and tilde to toggle open and close the terminal for more space', 'Discussion of using different shells such as zsh']}], 'highlights': ["VS Code's IntelliSense supports a wide range of languages and technologies, making it versatile for various web development tasks.", 'VS Code Insiders Edition provides frequent builds with new features and bug fixes, at least every day.', 'The Live Server extension has over 7 million downloads and enables real-time updates for files within the VS Code.', 'The command palette provides quick access to any VS Code command, enhancing productivity.', 'The setting sync feature in VS Code enables synchronization of settings, shortcuts, snippets, extensions, and UI state across instances.', 'The Live Share extension facilitates real-time collaboration, enhancing team productivity.', 'Emmet feature in VS Code offers powerful shortcuts for HTML and CSS, further saving time and enhancing productivity for developers.', 'The quick loading time of VS Code provides a seamless experience for users.', 'The usage of VS Code snippets for practical examples, including environment variables, multi-line snippets, and event listeners, provides a convenient and efficient way for coding.', 'GitLens extension provides advanced Git support including file history, line-specific commit details, and integration with GitHub.']}