title
Handlebars Tutorial

description
Get the Code Here : http://goo.gl/h81zZA In this video we'll learn Handlebars by walking through numerous examples. Handlebars is a superset of the Mustache template engine. A template engine helps you separate your HTML from dynamic content created by languages such as JavaScript. We'll look at how to dynamically place data, templates, working with arrays, helper functions, passing attributes, escaping strings for safety, block helpers, fn, inverse, partials, precompiling templates and much more.

detail
{'title': 'Handlebars Tutorial', 'heatmap': [{'end': 157.088, 'start': 103.854, 'weight': 1}, {'end': 315.031, 'start': 285.356, 'weight': 0.717}, {'end': 512.366, 'start': 486.491, 'weight': 0.854}, {'end': 976.924, 'start': 905.011, 'weight': 0.702}, {'end': 1688.832, 'start': 1641.922, 'weight': 0.72}, {'end': 2110.751, 'start': 2085.797, 'weight': 0.753}, {'end': 2157.341, 'start': 2127.178, 'weight': 0.729}], 'summary': "This handlebars tutorial covers essential node.js usage, installing node.js and handlebars, creating custom helper functions, using block helpers, exploring custom block helpers, 'with' in javascript, and pre-compiling templates, with practical applications and detailed examples.", 'chapters': [{'end': 56.188, 'segs': [{'end': 56.188, 'src': 'embed', 'start': 0.129, 'weight': 0, 'content': [{'end': 3.232, 'text': 'Well hello internet and welcome to my handlebars video tutorial.', 'start': 0.129, 'duration': 3.103}, {'end': 9.897, 'text': 'I decided to do this tutorial because I plan on using handlebars in my Node.js tutorials, which are coming very soon,', 'start': 3.372, 'duration': 6.525}, {'end': 14.14, 'text': 'and also because I saw a student pulling their hair out trying to use handlebars.', 'start': 9.897, 'duration': 4.243}, {'end': 20.105, 'text': "so I'm basically going to try to teach all of the things that tend to confuse people about handlebars in this one video.", 'start': 14.14, 'duration': 5.965}, {'end': 24.066, 'text': 'now handlebars is a superset of the mustache template engine,', 'start': 20.325, 'duration': 3.741}, {'end': 32.189, 'text': 'and a template engine quite simply just helps us separate our HTML from our dynamic content created by languages such as JavaScript,', 'start': 24.066, 'duration': 8.123}, {'end': 38.752, 'text': "and in this tutorial I'm going to cover how to dynamically place data templates, how to work with arrays of data, helper functions,", 'start': 32.189, 'duration': 6.563}, {'end': 45.735, 'text': 'passing attributes, escaping strings for safety, block helpers, using else if function inverse with.', 'start': 38.752, 'duration': 6.983}, {'end': 50.841, 'text': "I'm also going to cover partials and, of course, pre-compiling templates and a whole bunch more.", 'start': 45.735, 'duration': 5.106}, {'end': 56.188, 'text': "Basically I'm going to cover everything you need to know about handlebars to get started and do whatever you'd ever want to do with it.", 'start': 51.041, 'duration': 5.147}], 'summary': 'Handlebars tutorial covers dynamic data placement, arrays, helpers, escaping, block helpers, partials, pre-compiling, and more.', 'duration': 56.059, 'max_score': 0.129, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4HuAnM6b2d8/pics/4HuAnM6b2d8129.jpg'}], 'start': 0.129, 'title': 'Handlebars video tutorial', 'summary': 'Covers the essentials of using handlebars in node.js tutorials, including separating html from dynamic content, working with arrays of data, helper functions, passing attributes, escaping strings, block helpers, using else if function inverse, partials, and pre-compiling templates.', 'chapters': [{'end': 56.188, 'start': 0.129, 'title': 'Handlebars video tutorial', 'summary': 'Covers the essentials of using handlebars in node.js tutorials, including separating html from dynamic content, working with arrays of data, helper functions, passing attributes, escaping strings, block helpers, using else if function inverse, partials, and pre-compiling templates.', 'duration': 56.059, 'highlights': ['The chapter covers how to dynamically place data templates, work with arrays of data, helper functions, passing attributes, escaping strings for safety, block helpers, using else if function inverse, partials, and pre-compiling templates.', 'Handlebars is a superset of the mustache template engine and helps separate HTML from dynamic content created by languages like JavaScript.', 'The tutorial aims to help address common confusion points about handlebars and provide a comprehensive understanding for beginners.']}], 'duration': 56.059, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4HuAnM6b2d8/pics/4HuAnM6b2d8129.jpg', 'highlights': ['The tutorial aims to help address common confusion points about handlebars and provide a comprehensive understanding for beginners.', 'Handlebars is a superset of the mustache template engine and helps separate HTML from dynamic content created by languages like JavaScript.', 'The chapter covers how to dynamically place data templates, work with arrays of data, helper functions, passing attributes, escaping strings for safety, block helpers, using else if function inverse, partials, and pre-compiling templates.']}, {'end': 584.255, 'segs': [{'end': 157.088, 'src': 'heatmap', 'start': 76.134, 'weight': 0, 'content': [{'end': 77.394, 'text': "Don't get confused by that.", 'start': 76.134, 'duration': 1.26}, {'end': 79.395, 'text': 'so that our pages are going to load faster.', 'start': 77.654, 'duration': 1.741}, {'end': 83.118, 'text': 'So just go on to nodejs.org and click on this.', 'start': 79.596, 'duration': 3.522}, {'end': 85.94, 'text': "And if you're on Windows or whatever, just click on Run.", 'start': 83.498, 'duration': 2.442}, {'end': 88.502, 'text': "In Mac, everything's going to work exactly the same.", 'start': 85.96, 'duration': 2.542}, {'end': 89.883, 'text': 'Click on Next again.', 'start': 88.602, 'duration': 1.281}, {'end': 91.384, 'text': 'Click that you want to accept this.', 'start': 90.023, 'duration': 1.361}, {'end': 92.325, 'text': 'Click on Next.', 'start': 91.464, 'duration': 0.861}, {'end': 94.467, 'text': "It's going to show you where it's going to install it.", 'start': 92.625, 'duration': 1.842}, {'end': 95.467, 'text': "That's perfectly fine.", 'start': 94.507, 'duration': 0.96}, {'end': 96.268, 'text': 'Click on Next.', 'start': 95.527, 'duration': 0.741}, {'end': 100.571, 'text': 'and again click on next and then click on install, and there you are.', 'start': 96.648, 'duration': 3.923}, {'end': 103.854, 'text': 'node.js is installed and click on finish.', 'start': 100.571, 'duration': 3.283}, {'end': 112.26, 'text': "now we're going to go in here and install handlebars.cli, and you're going to have to do this in either your command line, if you are on windows,", 'start': 103.854, 'duration': 8.406}, {'end': 113.981, 'text': "or in your terminal if you're on mac.", 'start': 112.26, 'duration': 1.721}, {'end': 115.202, 'text': 'do it exactly the same way.', 'start': 113.981, 'duration': 1.221}, {'end': 122.628, 'text': "you're just going to type in mpm, install handlebars, dash g and, as you can see right there, it's going to install quite easy.", 'start': 115.202, 'duration': 7.426}, {'end': 126.21, 'text': "Now we can go over to Handlebars and download the library you're going to need.", 'start': 122.788, 'duration': 3.422}, {'end': 129.551, 'text': "Just quite simply click on Download, and it's going to download.", 'start': 126.49, 'duration': 3.061}, {'end': 135.957, 'text': "And this is what it's going to look like as of now, Handlebars-V 4.0.2.", 'start': 129.793, 'duration': 6.164}, {'end': 139.079, 'text': "And I'll show you here in a minute exactly where you're going to use that in your code.", 'start': 135.957, 'duration': 3.122}, {'end': 141.12, 'text': "So now let's get over and start writing some code.", 'start': 139.219, 'duration': 1.901}, {'end': 148, 'text': 'Alright. so on the left side of the screen and you can see right here exactly where I installed Handlebars,', 'start': 141.954, 'duration': 6.046}, {'end': 152.404, 'text': "and you're just going to put this in the directory with all of your code, just to keep everything nice and simple.", 'start': 148, 'duration': 4.404}, {'end': 157.088, 'text': 'But I just have Sublime Text on the left side of the screen, and I have a browser on the right side.', 'start': 152.564, 'duration': 4.524}], 'summary': 'Guide to installing node.js and handlebars library for web development.', 'duration': 59.823, 'max_score': 76.134, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4HuAnM6b2d8/pics/4HuAnM6b2d876134.jpg'}, {'end': 260.346, 'src': 'embed', 'start': 229.908, 'weight': 3, 'content': [{'end': 231.328, 'text': "Doesn't matter what you name these things.", 'start': 229.908, 'duration': 1.42}, {'end': 234.389, 'text': "And I'll call handlebars compile.", 'start': 231.948, 'duration': 2.441}, {'end': 240.651, 'text': 'And this is basically going to join the data that is in JavaScript with the HTML to keep everything separated from itself.', 'start': 234.589, 'duration': 6.062}, {'end': 242.993, 'text': "So now I'll go and create that data.", 'start': 240.931, 'duration': 2.062}, {'end': 247.136, 'text': "I'm going to go template, and then I'll define everything that I want to place inside of here.", 'start': 243.213, 'duration': 3.923}, {'end': 250.479, 'text': 'As you can see, name is going to be Derek, and you can see how those match up there.', 'start': 247.216, 'duration': 3.263}, {'end': 254.742, 'text': "So of course, I'm going to do exactly the same thing with all the other pieces of data.", 'start': 250.739, 'duration': 4.003}, {'end': 257.603, 'text': 'And of course, all of this code is available for download.', 'start': 254.962, 'duration': 2.641}, {'end': 260.346, 'text': "There's a link in the description underneath this video.", 'start': 257.644, 'duration': 2.702}], 'summary': 'Using handlebars to join javascript data with html, creating templates for data, and providing downloadable code.', 'duration': 30.438, 'max_score': 229.908, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4HuAnM6b2d8/pics/4HuAnM6b2d8229908.jpg'}, {'end': 315.031, 'src': 'heatmap', 'start': 285.356, 'weight': 0.717, 'content': [{'end': 290.581, 'text': 'And if we reload over here on the right side of the screen, you can see that all of that information went right inside of there.', 'start': 285.356, 'duration': 5.225}, {'end': 293.864, 'text': 'So there is Handlebars in action in its most basic form.', 'start': 290.741, 'duration': 3.123}, {'end': 296.587, 'text': "Now I'm going to go and show you some more complicated ways to use it.", 'start': 293.924, 'duration': 2.663}, {'end': 301.079, 'text': 'okay. so of course, make sure you have this, and this is in the directory.', 'start': 297.256, 'duration': 3.823}, {'end': 303.541, 'text': 'remember, we downloaded this from the handlebars website.', 'start': 301.079, 'duration': 2.462}, {'end': 305.423, 'text': 'this is in the directory where all our code is.', 'start': 303.541, 'duration': 1.882}, {'end': 309.486, 'text': "now I'm going to come in here and create another div, and there that is now.", 'start': 305.423, 'duration': 4.063}, {'end': 315.031, 'text': "of course, it's going to be better for us to separate our templates from our actual javascript,", 'start': 309.486, 'duration': 5.545}], 'summary': 'Introduction to using handlebars for templating and separating templates from javascript.', 'duration': 29.675, 'max_score': 285.356, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4HuAnM6b2d8/pics/4HuAnM6b2d8285356.jpg'}, {'end': 374.558, 'src': 'embed', 'start': 346.069, 'weight': 4, 'content': [{'end': 350.15, 'text': "now i'm going to create an ordered list And I'm going to use the each helper here.", 'start': 346.069, 'duration': 4.081}, {'end': 353.671, 'text': "And what it's going to allow us to do is insert arrays of data.", 'start': 350.29, 'duration': 3.381}, {'end': 360.013, 'text': "And how you use it, again this is handlebars, is you go each and you're going to put a hash symbol inside of here.", 'start': 353.871, 'duration': 6.142}, {'end': 361.333, 'text': 'Then follow that with each.', 'start': 360.113, 'duration': 1.22}, {'end': 365.514, 'text': "And then you're going to cycle through whatever array of data you're going to cycle through.", 'start': 361.673, 'duration': 3.841}, {'end': 369.055, 'text': "And then inside of this, let's say that I want to create little links.", 'start': 365.774, 'duration': 3.281}, {'end': 370.895, 'text': "And then I'm going to have quote.", 'start': 369.435, 'duration': 1.46}, {'end': 374.558, 'text': "And I'm going to create this in a second so you'll see exactly how those arrays are structured.", 'start': 371.337, 'duration': 3.221}], 'summary': "Using the 'each' helper to insert arrays of data in handlebars.", 'duration': 28.489, 'max_score': 346.069, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4HuAnM6b2d8/pics/4HuAnM6b2d8346069.jpg'}, {'end': 512.366, 'src': 'heatmap', 'start': 486.491, 'weight': 0.854, 'content': [{'end': 490.854, 'text': "and how we're going to do that is just go document again and get element by ID.", 'start': 486.491, 'duration': 4.363}, {'end': 492.495, 'text': 'this is going to be quote.', 'start': 490.854, 'duration': 1.641}, {'end': 501.78, 'text': "data is what we're going to be putting the information in, and then we'll just go enter HTML and add in all of our information with our HTML as well.", 'start': 492.495, 'duration': 9.285}, {'end': 506.282, 'text': 'and if we load and save that, you can see right there it says favorite Yogi Berra quotes,', 'start': 501.78, 'duration': 4.502}, {'end': 512.366, 'text': 'it automatically put his name inside of there and it also cycled through and generated this ordered list with all the quotes right there.', 'start': 506.282, 'duration': 6.084}], 'summary': 'Using document and element by id to add yogi berra quotes in an ordered list', 'duration': 25.875, 'max_score': 486.491, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4HuAnM6b2d8/pics/4HuAnM6b2d8486491.jpg'}, {'end': 592.339, 'src': 'embed', 'start': 562.387, 'weight': 6, 'content': [{'end': 564.368, 'text': 'And we can save that and reload it.', 'start': 562.387, 'duration': 1.981}, {'end': 568.269, 'text': "And now there you can see is a short bio on Yogi Berra and it's all italic.", 'start': 564.628, 'duration': 3.641}, {'end': 575.812, 'text': "Now the reason why we used triple stashes inside of here, let's go and get rid of them, is you just use double and you reload it.", 'start': 568.509, 'duration': 7.303}, {'end': 577.972, 'text': "It's not going to use the tags.", 'start': 576.072, 'duration': 1.9}, {'end': 579.493, 'text': "So that's the reason why we did that.", 'start': 578.233, 'duration': 1.26}, {'end': 584.255, 'text': "Now, up inside of here, I'm going to call a custom helper function,", 'start': 579.713, 'duration': 4.542}, {'end': 592.339, 'text': "which is going to generate HTML tags that are going to allow me not to need to use the triple stashes inside of here if I'd like to.", 'start': 584.255, 'duration': 8.084}], 'summary': "Custom helper function generates html tags to avoid using triple stashes for italicizing yogi berra's short bio.", 'duration': 29.952, 'max_score': 562.387, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4HuAnM6b2d8/pics/4HuAnM6b2d8562387.jpg'}], 'start': 56.308, 'title': 'Installing node.js, handlebars, and introduction to handlebars javascript library', 'summary': "Covers the installation process for node.js and handlebars, including downloading node.js from nodejs.org, installing it, and then installing handlebars.cli using the command 'npm install handlebars -g'. it also introduces the basics of using handlebars javascript library to dynamically generate html content, showcasing how to structure data, create templates, and separate html from javascript, with examples of merging data with html, cycling through arrays, and using triple stashes for html tags.", 'chapters': [{'end': 167.098, 'start': 56.308, 'title': 'Installing node.js and handlebars', 'summary': "Covers the installation process for node.js and handlebars, including downloading node.js from nodejs.org, installing it, and then installing handlebars.cli using the command 'npm install handlebars -g'. it also covers downloading the handlebars library and setting up the development environment with sublime text and chrome.", 'duration': 110.79, 'highlights': ['The chapter covers the installation process for Node.js and Handlebars. This is the main focus of the chapter and sets the context for the rest of the content.', 'Downloading Node.js from nodejs.org and installing it. Provides a specific action point for the audience, helping them understand the initial steps involved in the installation process.', "Installing Handlebars.cli using the command 'npm install handlebars -g'. Offers a clear instruction for installing Handlebars.cli, a crucial part of the setup process.", 'Downloading the Handlebars library and setting up the development environment with Sublime Text and Chrome. Concludes the installation process by detailing the download of the Handlebars library and the setup of the development environment, providing a complete picture of the necessary steps.']}, {'end': 584.255, 'start': 167.358, 'title': 'Introduction to handlebars javascript library', 'summary': 'Introduces the basics of using handlebars javascript library to dynamically generate html content, showcasing how to structure data, create templates, and separate html from javascript, with examples of merging data with html, cycling through arrays, and using triple stashes for html tags.', 'duration': 416.897, 'highlights': ['The chapter introduces the basics of using Handlebars JavaScript library, covering how to structure data, create templates, and separate HTML from JavaScript.', 'Demonstrates the process of merging data with HTML using Handlebars JavaScript library, focusing on creating a div to place generated information on the screen and utilizing JavaScript code to structure the data.', "Illustrates the usage of the 'each' helper in Handlebars to cycle through arrays of data and automatically generate ordered lists, with the example of inserting Yogi Berra quotes into an ordered list.", 'Shows how to use triple stashes inside HTML tags with Handlebars, presenting an example of creating an italicized bio for Yogi Berra and explaining the purpose of using triple stashes for HTML tags.']}], 'duration': 527.947, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4HuAnM6b2d8/pics/4HuAnM6b2d856308.jpg', 'highlights': ['The chapter covers the installation process for Node.js and Handlebars. This is the main focus of the chapter and sets the context for the rest of the content.', 'Downloading Node.js from nodejs.org and installing it. Provides a specific action point for the audience, helping them understand the initial steps involved in the installation process.', "Installing Handlebars.cli using the command 'npm install handlebars -g'. Offers a clear instruction for installing Handlebars.cli, a crucial part of the setup process.", 'The chapter introduces the basics of using Handlebars JavaScript library, covering how to structure data, create templates, and separate HTML from JavaScript.', "Illustrates the usage of the 'each' helper in Handlebars to cycle through arrays of data and automatically generate ordered lists, with the example of inserting Yogi Berra quotes into an ordered list.", 'Demonstrates the process of merging data with HTML using Handlebars JavaScript library, focusing on creating a div to place generated information on the screen and utilizing JavaScript code to structure the data.', 'Shows how to use triple stashes inside HTML tags with Handlebars, presenting an example of creating an italicized bio for Yogi Berra and explaining the purpose of using triple stashes for HTML tags.', 'Downloading the Handlebars library and setting up the development environment with Sublime Text and Chrome. Concludes the installation process by detailing the download of the Handlebars library and the setup of the development environment, providing a complete picture of the necessary steps.']}, {'end': 998.081, 'segs': [{'end': 635.381, 'src': 'embed', 'start': 605.407, 'weight': 0, 'content': [{'end': 608.468, 'text': "and there's a website and then I'll throw another break statement.", 'start': 605.407, 'duration': 3.061}, {'end': 612.73, 'text': 'after this, keep everything separated and then down inside of the JavaScript area,', 'start': 608.468, 'duration': 4.262}, {'end': 619.474, 'text': "I'm going to come in here and create our own helper function and you're gonna type in handle bars,", 'start': 612.73, 'duration': 6.744}, {'end': 623.936, 'text': 'dot and register helper and remember I called this make link.', 'start': 619.474, 'duration': 4.462}, {'end': 629.958, 'text': "you can see right up here this guy make link and it's going to receive two pieces of data inside of it.", 'start': 623.936, 'duration': 6.022}, {'end': 635.381, 'text': "so I'm gonna go make link to find the name of our helper function And then you're going to define a function.", 'start': 629.958, 'duration': 5.423}], 'summary': "Creating a helper function 'make link' in javascript with handlebars.", 'duration': 29.974, 'max_score': 605.407, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4HuAnM6b2d8/pics/4HuAnM6b2d8605407.jpg'}, {'end': 771.779, 'src': 'embed', 'start': 730.277, 'weight': 1, 'content': [{'end': 734.261, 'text': 'And if we save that, you can see that the Yogi Berra Museum shows up right there.', 'start': 730.277, 'duration': 3.984}, {'end': 735.082, 'text': 'So there you go.', 'start': 734.502, 'duration': 0.58}, {'end': 742.37, 'text': 'Just make sure you always have all of your helpers defined before you have the call for the template to work with all the data.', 'start': 735.382, 'duration': 6.988}, {'end': 743.691, 'text': 'Causes a little bit of confusion.', 'start': 742.45, 'duration': 1.241}, {'end': 747.856, 'text': "And now I'll show you how to come in here and pass in attributes to a helper.", 'start': 743.911, 'duration': 3.945}, {'end': 749.598, 'text': "So once again, we're going to come up here.", 'start': 748.196, 'duration': 1.402}, {'end': 752.741, 'text': "I'm going to call a custom helper called change color.", 'start': 749.618, 'duration': 3.123}, {'end': 757.266, 'text': "And the text that's going to show is make my text red.", 'start': 753.101, 'duration': 4.165}, {'end': 760.85, 'text': "And then I'll define an attribute, which is the color is blue.", 'start': 757.587, 'duration': 3.263}, {'end': 762.252, 'text': 'Throw a break statement on there.', 'start': 761.05, 'duration': 1.202}, {'end': 767.996, 'text': "And then I'll come down inside of here and actually create the change color registered helper.", 'start': 762.532, 'duration': 5.464}, {'end': 771.779, 'text': "And we'll call handlebars again and register helper.", 'start': 768.377, 'duration': 3.402}], 'summary': 'Demonstrating how to define and use helpers in handlebars templates.', 'duration': 41.502, 'max_score': 730.277, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4HuAnM6b2d8/pics/4HuAnM6b2d8730277.jpg'}, {'end': 976.924, 'src': 'heatmap', 'start': 905.011, 'weight': 0.702, 'content': [{'end': 910.975, 'text': "Now I'll show you how to pass options that are going to be available to all helper functions that you create.", 'start': 905.011, 'duration': 5.964}, {'end': 913.617, 'text': "So let's say I want to create one called say hello.", 'start': 911.035, 'duration': 2.582}, {'end': 916.058, 'text': "Now I'll come down here and register a new helper.", 'start': 913.637, 'duration': 2.421}, {'end': 919.581, 'text': 'So just like before, handlebars, register helper.', 'start': 916.439, 'duration': 3.142}, {'end': 925.686, 'text': "and this guy's going to be called say hello, and then once again going to define a function inside of here.", 'start': 920.04, 'duration': 5.646}, {'end': 929.029, 'text': 'this time only options is going to be passed inside of there.', 'start': 925.686, 'duration': 3.343}, {'end': 935.876, 'text': "then what we're going to do is we are going to print out different information depending upon a value that's stored in options.", 'start': 929.029, 'duration': 6.847}, {'end': 939.779, 'text': "so go data, And that data is going to be a language that's going to be defined.", 'start': 935.876, 'duration': 3.903}, {'end': 947.484, 'text': "And I'll come down here inside of the template area so you can see exactly where you would pass any type of data that you would want to be shared with all helpers.", 'start': 939.979, 'duration': 7.505}, {'end': 952.348, 'text': "You're just going to come after this little curly brace right here, comma, and then you can put in data.", 'start': 947.504, 'duration': 4.844}, {'end': 956.811, 'text': "And then you're going to define all of the individual pieces that you would like inside here.", 'start': 952.648, 'duration': 4.163}, {'end': 958.432, 'text': 'So language in this situation.', 'start': 956.851, 'duration': 1.581}, {'end': 961.114, 'text': "And what I'm going to put inside of here is Spanish.", 'start': 958.752, 'duration': 2.362}, {'end': 965.317, 'text': 'And you come over and indent that and close that off just so you can see.', 'start': 961.354, 'duration': 3.963}, {'end': 969.159, 'text': "So that's how we pass information that would be available to any of the helpers.", 'start': 965.497, 'duration': 3.662}, {'end': 976.924, 'text': 'And now what I can do is just go in this switch statement and say case Spanish is the value of lang, which was passed in there.', 'start': 969.499, 'duration': 7.425}], 'summary': 'Tutorial on passing options to helper functions in handlebars.', 'duration': 71.913, 'max_score': 905.011, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4HuAnM6b2d8/pics/4HuAnM6b2d8905011.jpg'}, {'end': 952.348, 'src': 'embed', 'start': 925.686, 'weight': 3, 'content': [{'end': 929.029, 'text': 'this time only options is going to be passed inside of there.', 'start': 925.686, 'duration': 3.343}, {'end': 935.876, 'text': "then what we're going to do is we are going to print out different information depending upon a value that's stored in options.", 'start': 929.029, 'duration': 6.847}, {'end': 939.779, 'text': "so go data, And that data is going to be a language that's going to be defined.", 'start': 935.876, 'duration': 3.903}, {'end': 947.484, 'text': "And I'll come down here inside of the template area so you can see exactly where you would pass any type of data that you would want to be shared with all helpers.", 'start': 939.979, 'duration': 7.505}, {'end': 952.348, 'text': "You're just going to come after this little curly brace right here, comma, and then you can put in data.", 'start': 947.504, 'duration': 4.844}], 'summary': 'Printing different information based on language data.', 'duration': 26.662, 'max_score': 925.686, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4HuAnM6b2d8/pics/4HuAnM6b2d8925686.jpg'}], 'start': 584.255, 'title': 'Creating handlebars helper functions', 'summary': "Discusses creating a custom handlebars helper function, 'make link', to prevent code injection and emphasizes defining helpers before calling the template. it also demonstrates creating custom helper functions to dynamically change text color and display different information based on options.", 'chapters': [{'end': 749.598, 'start': 584.255, 'title': 'Creating custom handlebars helper function', 'summary': "Discusses creating a custom handlebars helper function, 'make link', to generate html tags and prevent code injection, allowing the use of 'triple stashes'. it also emphasizes the importance of defining helpers before calling the template.", 'duration': 165.343, 'highlights': ['Emphasizes the importance of defining helpers before calling the template. Importance of defining helpers before calling the template', "Discusses creating a custom handlebars helper function, 'make link', to generate HTML tags and prevent code injection. Creating a custom handlebars helper function, 'make link', to prevent code injection"]}, {'end': 998.081, 'start': 749.618, 'title': 'Handlebars helper functions', 'summary': 'Demonstrates creating custom helper functions in handlebars to dynamically change text color based on attributes and pass options to all helper functions. it also showcases how to display different information based on options using a switch statement.', 'duration': 248.463, 'highlights': ['Creating custom helper functions in Handlebars to dynamically change text color based on attributes Demonstrates how to create a custom helper function to dynamically change text color based on attributes, with examples of changing text to red, blue, or green.', "Passing options to all helper functions Shows how to pass options to all helper functions in Handlebars, with an example of passing a language option to a 'say hello' helper function.", "Displaying different information based on options using a switch statement Illustrates using a switch statement to display different information based on options, with examples of displaying 'hola' for Spanish, 'bonjour' for French, and 'hello' as a default."]}], 'duration': 413.826, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4HuAnM6b2d8/pics/4HuAnM6b2d8584255.jpg', 'highlights': ["Creating a custom handlebars helper function, 'make link', to prevent code injection", 'Emphasizes the importance of defining helpers before calling the template', 'Demonstrates how to create a custom helper function to dynamically change text color based on attributes', 'Illustrates using a switch statement to display different information based on options']}, {'end': 1274.964, 'segs': [{'end': 1026.637, 'src': 'embed', 'start': 998.081, 'weight': 0, 'content': [{'end': 1000.183, 'text': 'forgot that, sorry about that, and there you go.', 'start': 998.081, 'duration': 2.102}, {'end': 1007.169, 'text': "so that's how you can pass in a whole bunch of different types of data and use them in the templates and keep everything separated and neat.", 'start': 1000.183, 'duration': 6.986}, {'end': 1011.253, 'text': "now what i'm going to show you is how to use a really nifty trick called block helpers.", 'start': 1007.169, 'duration': 4.084}, {'end': 1016.429, 'text': "Okay so now I'm going to come in and create another helper function for us to be able to use here.", 'start': 1012.125, 'duration': 4.304}, {'end': 1021.793, 'text': "And my basic idea is I'm just going to show you so many examples that everything's going to make a lot of sense.", 'start': 1016.769, 'duration': 5.024}, {'end': 1026.637, 'text': "So in our JavaScript area, we're going to come in and get the document.", 'start': 1022.113, 'duration': 4.524}], 'summary': 'The transcript covers the usage of different data types in templates and the introduction of a helper function in javascript.', 'duration': 28.556, 'max_score': 998.081, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4HuAnM6b2d8/pics/4HuAnM6b2d8998081.jpg'}, {'end': 1071.641, 'src': 'embed', 'start': 1043.207, 'weight': 5, 'content': [{'end': 1045.488, 'text': 'and we need to compile this.', 'start': 1043.207, 'duration': 2.281}, {'end': 1049.611, 'text': "and let's go and give this guy a template, info,", 'start': 1045.488, 'duration': 4.123}, {'end': 1055.493, 'text': "name and that's what we'll be compiling here plate info and then we'll come in and register our helper.", 'start': 1049.611, 'duration': 5.882}, {'end': 1057.474, 'text': 'so register, helper.', 'start': 1055.493, 'duration': 1.981}, {'end': 1065.918, 'text': "and I'm going to call this make radio, because it's going to automatically generate a bunch of radio elements, radio buttons for our website,", 'start': 1057.474, 'duration': 8.444}, {'end': 1071.641, 'text': "and it's going to receive the name that's going to be associated with radio buttons and options as well.", 'start': 1065.918, 'duration': 5.723}], 'summary': 'Compiling a template for helper to generate radio buttons for website.', 'duration': 28.434, 'max_score': 1043.207, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4HuAnM6b2d8/pics/4HuAnM6b2d81043207.jpg'}, {'end': 1118.92, 'src': 'embed', 'start': 1091.004, 'weight': 4, 'content': [{'end': 1095.026, 'text': 'and I can go and jump back and forth and create these as well up here in our template.', 'start': 1091.004, 'duration': 4.022}, {'end': 1104.371, 'text': "if we want to call make radio again, this is basically a block, helper, that we are defining ourselves and we're going to pass inside of here,", 'start': 1095.026, 'duration': 9.345}, {'end': 1111.834, 'text': "size being the name that we are going to associate with each radio button and then we're going to close off, make radio,", 'start': 1104.371, 'duration': 7.463}, {'end': 1118.92, 'text': 'and then inside of here we can throw in all the options that we want to pass inside, so we can go small, medium large,', 'start': 1111.834, 'duration': 7.086}], 'summary': 'Creating a block helper for radio buttons with size options.', 'duration': 27.916, 'max_score': 1091.004, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4HuAnM6b2d8/pics/4HuAnM6b2d81091004.jpg'}, {'end': 1243.36, 'src': 'embed', 'start': 1218.73, 'weight': 3, 'content': [{'end': 1225.834, 'text': 'then, of course, after we are done cycling through and creating all the radio buttons that we need, we just call return output,', 'start': 1218.73, 'duration': 7.104}, {'end': 1227.695, 'text': 'which is going to contain all those radio buttons.', 'start': 1225.834, 'duration': 1.861}, {'end': 1236.178, 'text': "Now, in this situation, we're going to be generating all these radio buttons, but we do not have a template of data that we're going to be passing in.", 'start': 1227.975, 'duration': 8.203}, {'end': 1243.36, 'text': "Well, in that situation, we'll just go template data is equal to and call template and just leave it empty.", 'start': 1236.378, 'duration': 6.982}], 'summary': 'A function generates radio buttons and returns output.', 'duration': 24.63, 'max_score': 1218.73, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4HuAnM6b2d8/pics/4HuAnM6b2d81218730.jpg'}], 'start': 998.081, 'title': 'Using block helpers in templates and creating radio buttons with template and helper', 'summary': 'Demonstrates using block helpers to pass data into templates and introduces a helper function, followed by showcasing the creation of radio buttons using a template and helper function, simplifying the process of generating and displaying radio buttons.', 'chapters': [{'end': 1043.207, 'start': 998.081, 'title': 'Using block helpers in templates', 'summary': 'Demonstrates how to pass different types of data into templates and keep them separated and neat, followed by the introduction of a nifty trick called block helpers, and concludes by showcasing the usage of a helper function to make sense of the examples.', 'duration': 45.126, 'highlights': ['The chapter demonstrates how to pass different types of data into templates and keep them separated and neat with examples, making everything sensible.', 'Introduction of a nifty trick called block helpers to enhance template usage.', 'Showcasing the usage of a helper function to make sense of the examples in the chapter.']}, {'end': 1274.964, 'start': 1043.207, 'title': 'Creating radio buttons with template and helper', 'summary': 'Details the process of creating radio buttons using a template and helper function, which automatically generates radio elements for a website, simplifying the process of generating and displaying radio buttons.', 'duration': 231.757, 'highlights': ['The process of creating radio buttons using a template and helper function Explains the steps involved in creating radio buttons using a template and a helper function, simplifying the process of generating and displaying radio buttons.', 'Automatically generating radio elements for a website Describes the automatic generation of radio elements for a website, showcasing the efficiency and convenience provided by the helper function.', 'Simplifying the process of generating and displaying radio buttons Emphasizes the simplicity and ease of use in generating and displaying radio buttons using the described method, highlighting its user-friendly nature.']}], 'duration': 276.883, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4HuAnM6b2d8/pics/4HuAnM6b2d8998081.jpg', 'highlights': ['Introduction of a nifty trick called block helpers to enhance template usage.', 'The chapter demonstrates how to pass different types of data into templates and keep them separated and neat with examples, making everything sensible.', 'Showcasing the usage of a helper function to make sense of the examples in the chapter.', 'Simplifying the process of generating and displaying radio buttons Emphasizes the simplicity and ease of use in generating and displaying radio buttons using the described method, highlighting its user-friendly nature.', 'The process of creating radio buttons using a template and helper function Explains the steps involved in creating radio buttons using a template and a helper function, simplifying the process of generating and displaying radio buttons.', 'Automatically generating radio elements for a website Describes the automatic generation of radio elements for a website, showcasing the efficiency and convenience provided by the helper function.']}, {'end': 1592.83, 'segs': [{'end': 1436.722, 'src': 'embed', 'start': 1401.354, 'weight': 0, 'content': [{'end': 1404.537, 'text': 'you can see that numbers are not equal, shows up on the screen.', 'start': 1401.354, 'duration': 3.183}, {'end': 1406.739, 'text': "now let's enlarge that so you can see a little bit better.", 'start': 1404.537, 'duration': 2.202}, {'end': 1407.28, 'text': 'so there you go.', 'start': 1406.739, 'duration': 0.541}, {'end': 1416.528, 'text': "that's how we can create another custom little block helper file for us and how we can show different templates depending upon different conditions.", 'start': 1407.28, 'duration': 9.248}, {'end': 1422.739, 'text': "now handlebars also has a built-in if conditional that we're going to be able to use to display different results.", 'start': 1416.528, 'duration': 6.211}, {'end': 1427.72, 'text': "And here I'm going to create another helper function, handlebars, register.", 'start': 1423.179, 'duration': 4.541}, {'end': 1430.48, 'text': 'This stuff is very easy to remember once you do it for a while.', 'start': 1427.84, 'duration': 2.64}, {'end': 1436.722, 'text': "And handlebars specifically, is a tool that, whenever you first start using it, you're going to be pulling your hair out, going what?", 'start': 1430.941, 'duration': 5.781}], 'summary': 'Using handlebars, create custom helper functions and conditionally display different templates.', 'duration': 35.368, 'max_score': 1401.354, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4HuAnM6b2d8/pics/4HuAnM6b2d81401354.jpg'}, {'end': 1547.64, 'src': 'embed', 'start': 1519.604, 'weight': 1, 'content': [{'end': 1525.07, 'text': "So there's a whole bunch of other little helper blocks that we can create and a whole bunch of other things we can do with handlebars.", 'start': 1519.604, 'duration': 5.466}, {'end': 1531.097, 'text': "Now I'll show you how you can work with nested parameters in the data that's passed in using width.", 'start': 1525.37, 'duration': 5.727}, {'end': 1533.814, 'text': 'So I have my content div inside of here.', 'start': 1532.093, 'duration': 1.721}, {'end': 1537.015, 'text': "I pulled in handlebars and let's go and create some stuff.", 'start': 1533.874, 'duration': 3.141}, {'end': 1540.877, 'text': 'Okay, so you can see I have the content div which is where all the information is going to go.', 'start': 1537.275, 'duration': 3.602}, {'end': 1547.64, 'text': 'I have the handlebars library right here and I went down inside of here and automatically threw in some data for us to work with,', 'start': 1540.937, 'duration': 6.703}], 'summary': 'Introduction to creating helper blocks and working with nested parameters in handlebars.', 'duration': 28.036, 'max_score': 1519.604, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4HuAnM6b2d8/pics/4HuAnM6b2d81519604.jpg'}], 'start': 1275.264, 'title': 'Handlebars custom block helper and helper functions', 'summary': 'Explores creating a custom block helper in handlebars and demonstrates the use of handlebars helper functions, including conditional statements and nested parameters. it includes detailed examples and practical applications, such as displaying different templates based on conditions and working with equal and not equal numbers.', 'chapters': [{'end': 1436.722, 'start': 1275.264, 'title': 'Handlebars custom block helper', 'summary': 'Explores creating a custom block helper in handlebars, allowing for the display of different templates based on conditions, with an example demonstrating the functionality and output for equal and not equal numbers.', 'duration': 161.458, 'highlights': ['Creating a custom block helper in Handlebars Demonstrates the process of creating a custom block helper in Handlebars to display different templates based on conditions.', 'Example of displaying different templates based on conditions Illustrates the functionality of the custom block helper by displaying different output for equal and not equal numbers, showcasing the versatility of the approach.', 'Implementation of if conditional in Handlebars Discusses the usage of the built-in if conditional in Handlebars to display varying results based on conditions, adding to the flexibility of template rendering.']}, {'end': 1592.83, 'start': 1436.902, 'title': 'Handlebars helper functions', 'summary': 'Demonstrates the use of handlebars helper functions, including creating conditional statements and working with nested parameters, with detailed examples and practical applications.', 'duration': 155.928, 'highlights': ['The chapter demonstrates the use of handlebars helper functions The chapter provides detailed examples of creating helper functions in handlebars for conditional statements and working with nested parameters.', 'Creating conditional statements with handlebars The chapter explains the process of creating conditional statements in handlebars, allowing for dynamic content display based on specified conditions.', "Working with nested parameters using width in handlebars The chapter showcases the practical application of working with nested parameters in handlebars using the 'width' helper function, enabling targeted manipulation of specific data."]}], 'duration': 317.566, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4HuAnM6b2d8/pics/4HuAnM6b2d81275264.jpg', 'highlights': ['Creating a custom block helper in Handlebars to display different templates based on conditions', 'The chapter demonstrates the use of handlebars helper functions for conditional statements and working with nested parameters', 'Example of displaying different templates based on conditions to showcase the versatility of the approach', 'Implementation of if conditional in Handlebars to display varying results based on conditions, adding to the flexibility of template rendering', 'Creating conditional statements in handlebars for dynamic content display based on specified conditions', "Working with nested parameters in handlebars using the 'width' helper function for targeted manipulation of specific data"]}, {'end': 2219.377, 'segs': [{'end': 1688.832, 'src': 'heatmap', 'start': 1641.922, 'weight': 0.72, 'content': [{'end': 1646.547, 'text': "And let's say that I give it a class ISBN number for our Harry Potter book.", 'start': 1641.922, 'duration': 4.625}, {'end': 1650.331, 'text': 'And then I want to come in and grab the ISBN from the data section.', 'start': 1646.727, 'duration': 3.604}, {'end': 1654.115, 'text': "And then I'm going to do exactly the same thing for the author.", 'start': 1650.651, 'duration': 3.464}, {'end': 1655.136, 'text': 'So author inside of there.', 'start': 1654.135, 'duration': 1.001}, {'end': 1656.556, 'text': 'And author inside of there.', 'start': 1655.496, 'duration': 1.06}, {'end': 1657.337, 'text': 'Save that.', 'start': 1656.896, 'duration': 0.441}, {'end': 1657.937, 'text': 'Reload it.', 'start': 1657.477, 'duration': 0.46}, {'end': 1660.858, 'text': "And you can see Harry Potter and the Philosopher's Stone shows up.", 'start': 1658.197, 'duration': 2.661}, {'end': 1664.259, 'text': "And you can see the ISBN number and the author's name also shows up.", 'start': 1661.078, 'duration': 3.181}, {'end': 1666.419, 'text': "It's a pretty simple, really simple example.", 'start': 1664.479, 'duration': 1.94}, {'end': 1670.3, 'text': 'Just wanted to show that because that was something that really confused the student I was working with.', 'start': 1666.459, 'duration': 3.841}, {'end': 1671.981, 'text': "So there's an example of using with.", 'start': 1670.38, 'duration': 1.601}, {'end': 1678.785, 'text': "Okay, so now I'm going to use something called a partial, which is basically going to provide for code reuse, but unlike with helpers,", 'start': 1672.541, 'duration': 6.244}, {'end': 1684.529, 'text': "they don't compute anything, but instead they basically act like reusable placeholders for our data.", 'start': 1678.785, 'duration': 5.744}, {'end': 1685.69, 'text': "So let's create one right here.", 'start': 1684.629, 'duration': 1.061}, {'end': 1688.832, 'text': "And you can see we'll put a different little bracket inside of there.", 'start': 1686.25, 'duration': 2.582}], 'summary': 'Demonstration of using class isbn number and author for harry potter book, with a simple example and explanation of partials for code reuse.', 'duration': 46.91, 'max_score': 1641.922, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4HuAnM6b2d8/pics/4HuAnM6b2d81641922.jpg'}, {'end': 1685.69, 'src': 'embed', 'start': 1658.197, 'weight': 0, 'content': [{'end': 1660.858, 'text': "And you can see Harry Potter and the Philosopher's Stone shows up.", 'start': 1658.197, 'duration': 2.661}, {'end': 1664.259, 'text': "And you can see the ISBN number and the author's name also shows up.", 'start': 1661.078, 'duration': 3.181}, {'end': 1666.419, 'text': "It's a pretty simple, really simple example.", 'start': 1664.479, 'duration': 1.94}, {'end': 1670.3, 'text': 'Just wanted to show that because that was something that really confused the student I was working with.', 'start': 1666.459, 'duration': 3.841}, {'end': 1671.981, 'text': "So there's an example of using with.", 'start': 1670.38, 'duration': 1.601}, {'end': 1678.785, 'text': "Okay, so now I'm going to use something called a partial, which is basically going to provide for code reuse, but unlike with helpers,", 'start': 1672.541, 'duration': 6.244}, {'end': 1684.529, 'text': "they don't compute anything, but instead they basically act like reusable placeholders for our data.", 'start': 1678.785, 'duration': 5.744}, {'end': 1685.69, 'text': "So let's create one right here.", 'start': 1684.629, 'duration': 1.061}], 'summary': "Example of using 'with' and introducing 'partials' for code reuse.", 'duration': 27.493, 'max_score': 1658.197, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4HuAnM6b2d8/pics/4HuAnM6b2d81658197.jpg'}, {'end': 1996.416, 'src': 'embed', 'start': 1974.41, 'weight': 1, 'content': [{'end': 1982.532, 'text': 'because at least I never saw any version of using pre-compiling and handlebars in which they show you the previous versus the post version.', 'start': 1974.41, 'duration': 8.122}, {'end': 1986.919, 'text': 'where you have the pre compile, which I think really helps everything make a lot more sense.', 'start': 1983.232, 'duration': 3.687}, {'end': 1989.524, 'text': "And let's go and define our data.", 'start': 1987.42, 'duration': 2.104}, {'end': 1993.25, 'text': "I'd like to show you a couple different ways to set all this stuff up here.", 'start': 1989.704, 'duration': 3.546}, {'end': 1996.416, 'text': "I'm going to have a groceries array.", 'start': 1993.41, 'duration': 3.006}], 'summary': 'Demonstrates pre-compiling and handlebars for defining data and setting up a groceries array.', 'duration': 22.006, 'max_score': 1974.41, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4HuAnM6b2d8/pics/4HuAnM6b2d81974410.jpg'}, {'end': 2117.114, 'src': 'heatmap', 'start': 2085.797, 'weight': 0.753, 'content': [{'end': 2086.878, 'text': "actually, it's pretty easy.", 'start': 2085.797, 'duration': 1.081}, {'end': 2094.422, 'text': "we're going to come in here, right where we normally have our template, and we're going to copy all of this, everything between these two scripts.", 'start': 2086.878, 'duration': 7.544}, {'end': 2103.187, 'text': 'so copy that and paste that into a file that i called groceries dot, handlebars, into your same exact directory, where you have everything else saved.', 'start': 2094.422, 'duration': 8.765}, {'end': 2106.248, 'text': "so have that set up there and we're gonna save it.", 'start': 2103.187, 'duration': 3.061}, {'end': 2108.309, 'text': "now you're gonna open up a terminal or the command line.", 'start': 2106.248, 'duration': 2.061}, {'end': 2110.751, 'text': "whether you're on Mac or Windows or Linux, whatever.", 'start': 2108.309, 'duration': 2.442}, {'end': 2117.114, 'text': "all of the commands are precisely exactly the same, and to pre compile this we're going to go handlebars.", 'start': 2110.751, 'duration': 6.363}], 'summary': 'Demonstrates copying and pasting code, setting up a file, and using handlebars to precompile.', 'duration': 31.317, 'max_score': 2085.797, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4HuAnM6b2d8/pics/4HuAnM6b2d82085797.jpg'}, {'end': 2157.341, 'src': 'heatmap', 'start': 2127.178, 'weight': 0.729, 'content': [{'end': 2134.244, 'text': "and then you're going to define exactly where you want the JavaScript file that is going to be compiled, where it's going to be saved,", 'start': 2127.178, 'duration': 7.066}, {'end': 2134.844, 'text': 'the name of that.', 'start': 2134.244, 'duration': 0.6}, {'end': 2139.348, 'text': 'Hit enter, ls, and you can see right here, groceries.js shows right up there.', 'start': 2135.105, 'duration': 4.243}, {'end': 2140.429, 'text': 'We can take a look at it.', 'start': 2139.368, 'duration': 1.061}, {'end': 2143.472, 'text': 'Go inside of here, open, groceries.js.', 'start': 2140.569, 'duration': 2.903}, {'end': 2145.193, 'text': 'This is the file we just generated.', 'start': 2143.732, 'duration': 1.461}, {'end': 2146.234, 'text': 'Here it is right there.', 'start': 2145.273, 'duration': 0.961}, {'end': 2147.715, 'text': 'Just basic JavaScript.', 'start': 2146.554, 'duration': 1.161}, {'end': 2151.678, 'text': 'And now we can jump over and make this work with our pre-compiled template.', 'start': 2147.935, 'duration': 3.743}, {'end': 2157.341, 'text': 'So to make this work, all we need to do is come in and reference that file that was just generated.', 'start': 2151.978, 'duration': 5.363}], 'summary': "A javascript file 'groceries.js' is compiled and referenced for pre-compiled templates.", 'duration': 30.163, 'max_score': 2127.178, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4HuAnM6b2d8/pics/4HuAnM6b2d82127178.jpg'}], 'start': 1592.83, 'title': "Using 'with' and handlebars in javascript", 'summary': "Demonstrates the use of 'with' in javascript to simplify code, reducing repetition and improving readability. it also introduces working with handlebars, discussing the use of partials for code reuse, creating dynamic data templates, defining partials, and pre-compiling handlebars templates to enhance loading speed. the topics are illustrated through examples of creating a div to display book details and applying handlebars in a grocery list.", 'chapters': [{'end': 1671.981, 'start': 1592.83, 'title': "Using 'with' to simplify javascript code", 'summary': "Demonstrates using 'with' in javascript to simplify code, reducing repetition and improving readability, illustrated through an example of creating a div to display the title, isbn, and author of a book.", 'duration': 79.151, 'highlights': ["Using 'with' in JavaScript allows for simplification and improved readability of code, reducing the need to repeat 'techdata' for each property, such as ISBN and author.", "The example illustrates creating a div to display the title, ISBN, and author of a book, showcasing the use of 'with' to streamline the code and improve clarity for accessing properties.", "The demonstration aims to clarify the usage of 'with' in JavaScript, particularly addressing confusion experienced by a student, highlighting its effectiveness in simplifying code."]}, {'end': 2219.377, 'start': 1672.541, 'title': 'Working with handlebars', 'summary': 'Introduces working with handlebars, discussing the use of partials for code reuse, creating a dynamic data template, defining partials, and pre-compiling handlebars templates to enhance loading speed. it also demonstrates the application of handlebars in a grocery list example.', 'duration': 546.836, 'highlights': ['The chapter introduces working with handlebars, discussing the use of partials for code reuse, creating a dynamic data template, defining partials, and pre-compiling handlebars templates to enhance loading speed. The chapter covers the use of partials for code reuse, creating a dynamic data template, and defining partials, along with pre-compiling handlebars templates to enhance loading speed.', 'It also demonstrates the application of handlebars in a grocery list example. The chapter demonstrates the application of handlebars in a grocery list example, showcasing the use of each block to cycle through items and the process of pre-compiling handlebars templates for faster loading.']}], 'duration': 626.547, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4HuAnM6b2d8/pics/4HuAnM6b2d81592830.jpg', 'highlights': ["Using 'with' in JavaScript simplifies code, improving readability and reducing repetition.", 'Introducing handlebars, discussing partials for code reuse, dynamic data templates, and pre-compiling templates.', "Demonstrating 'with' in JavaScript to streamline code and improve clarity for accessing properties.", 'Illustrating handlebars application in a grocery list example, showcasing each block usage and pre-compiling templates.']}], 'highlights': ['The tutorial aims to help address common confusion points about handlebars and provide a comprehensive understanding for beginners.', 'Handlebars is a superset of the mustache template engine and helps separate HTML from dynamic content created by languages like JavaScript.', 'The chapter covers how to dynamically place data templates, work with arrays of data, helper functions, passing attributes, escaping strings for safety, block helpers, using else if function inverse, partials, and pre-compiling templates.', 'The chapter covers the installation process for Node.js and Handlebars. This is the main focus of the chapter and sets the context for the rest of the content.', 'Downloading Node.js from nodejs.org and installing it. Provides a specific action point for the audience, helping them understand the initial steps involved in the installation process.', "Installing Handlebars.cli using the command 'npm install handlebars -g'. Offers a clear instruction for installing Handlebars.cli, a crucial part of the setup process.", 'The chapter introduces the basics of using Handlebars JavaScript library, covering how to structure data, create templates, and separate HTML from JavaScript.', "Illustrates the usage of the 'each' helper in Handlebars to cycle through arrays of data and automatically generate ordered lists, with the example of inserting Yogi Berra quotes into an ordered list.", 'Demonstrates the process of merging data with HTML using Handlebars JavaScript library, focusing on creating a div to place generated information on the screen and utilizing JavaScript code to structure the data.', 'Shows how to use triple stashes inside HTML tags with Handlebars, presenting an example of creating an italicized bio for Yogi Berra and explaining the purpose of using triple stashes for HTML tags.', 'Downloading the Handlebars library and setting up the development environment with Sublime Text and Chrome. Concludes the installation process by detailing the download of the Handlebars library and the setup of the development environment, providing a complete picture of the necessary steps.', "Creating a custom handlebars helper function, 'make link', to prevent code injection", 'Emphasizes the importance of defining helpers before calling the template', 'Demonstrates how to create a custom helper function to dynamically change text color based on attributes', 'Illustrates using a switch statement to display different information based on options', 'Introduction of a nifty trick called block helpers to enhance template usage.', 'The chapter demonstrates how to pass different types of data into templates and keep them separated and neat with examples, making everything sensible.', 'Showcasing the usage of a helper function to make sense of the examples in the chapter.', 'Simplifying the process of generating and displaying radio buttons Emphasizes the simplicity and ease of use in generating and displaying radio buttons using the described method, highlighting its user-friendly nature.', 'The process of creating radio buttons using a template and helper function Explains the steps involved in creating radio buttons using a template and a helper function, simplifying the process of generating and displaying radio buttons.', 'Automatically generating radio elements for a website Describes the automatic generation of radio elements for a website, showcasing the efficiency and convenience provided by the helper function.', 'Creating a custom block helper in Handlebars to display different templates based on conditions', 'The chapter demonstrates the use of handlebars helper functions for conditional statements and working with nested parameters', 'Example of displaying different templates based on conditions to showcase the versatility of the approach', 'Implementation of if conditional in Handlebars to display varying results based on conditions, adding to the flexibility of template rendering', 'Creating conditional statements in handlebars for dynamic content display based on specified conditions', "Working with nested parameters in handlebars using the 'width' helper function for targeted manipulation of specific data", "Using 'with' in JavaScript simplifies code, improving readability and reducing repetition.", 'Introducing handlebars, discussing partials for code reuse, dynamic data templates, and pre-compiling templates.', "Demonstrating 'with' in JavaScript to streamline code and improve clarity for accessing properties.", 'Illustrating handlebars application in a grocery list example, showcasing each block usage and pre-compiling templates.']}