title
Handlebars.js Tutorial (webpack integration at the end)

description
Join my premium 2024 bootcamp here https://learnwebcode.teachable.com/p/brads-web-developer-bootcamp?coupon_code=YOUTUBEWELCOME Since the filming of this lesson webpack has changed their API so don't type out the exact webpack code you see on my screen. Instead, my GitHub link below has the newest code changes that will work. NOTE: in my updated version you do NOT need the dollar sign $ before the helper name in your templates. "Follow along" code: http://codepen.io/anon/pen/qqPegg "Finished product" code: http://codepen.io/anon/pen/WoddJb?editors=1010 Webpack Handlebars Example Repo: https://github.com/LearnWebCode/handlebars-webpack Follow me for cat pics: Twitter: https://twitter.com/learnwebcode Facebook: https://www.facebook.com/Brad-Schiff-1542576316048470/

detail
{'title': 'Handlebars.js Tutorial (webpack integration at the end)', 'heatmap': [{'end': 1384.63, 'start': 1340.776, 'weight': 0.852}, {'end': 1468.675, 'start': 1416.215, 'weight': 0.832}, {'end': 1570.998, 'start': 1498.384, 'weight': 0.706}], 'summary': 'Tutorial on handlebars.js covers using handlebars to convert json data into html content, demonstrating the creation of html from json data, html generation, expanding templates, and integrating with webpack and javascript organization, resulting in improved code organization and reduced html clutter.', 'chapters': [{'end': 167.682, 'segs': [{'end': 72.597, 'src': 'embed', 'start': 24.759, 'weight': 0, 'content': [{'end': 29.321, 'text': "Now you might be thinking hey isn't this exactly what we did just like one or two videos ago.", 'start': 24.759, 'duration': 4.562}, {'end': 37.152, 'text': "Well yes but this time we are going to use handlebars and we'll find out that handlebars can do a lot of the heavy lifting for us.", 'start': 29.986, 'duration': 7.166}, {'end': 46.44, 'text': "So with handlebars we don't need to manually write our own for each loops and we don't need to awkwardly concatenate an HTML string together,", 'start': 37.913, 'duration': 8.527}, {'end': 47.18, 'text': 'bit by bit.', 'start': 46.44, 'duration': 0.74}, {'end': 57.109, 'text': 'OK so we can avoid all of that tedious work because handlebars provides a super easy way to create HTML templates based on Jason data.', 'start': 47.2, 'duration': 9.909}, {'end': 57.949, 'text': 'All right.', 'start': 57.629, 'duration': 0.32}, {'end': 60.27, 'text': "So without further ado let's get started.", 'start': 57.989, 'duration': 2.281}, {'end': 66.294, 'text': 'OK So behind the scenes I just removed all of the handlebars related JavaScript from the page.', 'start': 61.031, 'duration': 5.263}, {'end': 72.597, 'text': 'So now I just have a bare bones HTML file and you can follow along with me from this point.', 'start': 66.874, 'duration': 5.723}], 'summary': 'Using handlebars for simplified html template creation without manual for loops or string concatenation.', 'duration': 47.838, 'max_score': 24.759, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wSNa5b1mS5Y/pics/wSNa5b1mS5Y24759.jpg'}, {'end': 147.369, 'src': 'embed', 'start': 120.038, 'weight': 2, 'content': [{'end': 126.442, 'text': 'But moving on this code is going to go out and fetch the JSON data that lives at this URL.', 'start': 120.038, 'duration': 6.404}, {'end': 130.283, 'text': 'OK And if that request is successful then this code will run.', 'start': 127.242, 'duration': 3.041}, {'end': 137.468, 'text': "So I'm just saving the JSON data that I retrieved to a new variable named data and I'm logging that out to the console.", 'start': 131.024, 'duration': 6.444}, {'end': 142.926, 'text': 'OK. so if I check out my browser and refresh and check the console as expected,', 'start': 138.123, 'duration': 4.803}, {'end': 147.369, 'text': "here's an object with an array named pets and within it there are three objects.", 'start': 142.926, 'duration': 4.443}], 'summary': "Code fetches json data from url, saves to variable 'data', and logs it to console. result: 3 objects in array 'pets'.", 'duration': 27.331, 'max_score': 120.038, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wSNa5b1mS5Y/pics/wSNa5b1mS5Y120038.jpg'}], 'start': 0.209, 'title': 'Using handlebars for html templates', 'summary': 'Introduces the use of handlebars to convert raw json data into neatly formatted html content, simplifying the process by eliminating the need to manually write for each loops and concatenate html strings.', 'chapters': [{'end': 167.682, 'start': 0.209, 'title': 'Using handlebars for html templates', 'summary': 'Introduces the use of handlebars to convert raw json data into neatly formatted html content, simplifying the process by eliminating the need to manually write for each loops and concatenate html strings.', 'duration': 167.473, 'highlights': ['The chapter introduces the use of handlebars to convert raw JSON data into neatly formatted HTML content Handlebars is used to transform raw JSON data into well-formatted HTML, simplifying the process.', 'Handlebars eliminates the need to manually write for each loops and concatenate HTML strings Handlebars simplifies the process by removing the manual writing of for each loops and concatenation of HTML strings.', "The JavaScript code fetches JSON data from a URL and stores it in a variable named 'data' The JavaScript code makes an Ajax request to fetch JSON data from a specific URL and stores it in a variable named 'data'."]}], 'duration': 167.473, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wSNa5b1mS5Y/pics/wSNa5b1mS5Y209.jpg', 'highlights': ['Handlebars is used to transform raw JSON data into well-formatted HTML, simplifying the process.', 'Handlebars simplifies the process by removing the manual writing of for each loops and concatenation of HTML strings.', "The JavaScript code makes an Ajax request to fetch JSON data from a specific URL and stores it in a variable named 'data'."]}, {'end': 478.437, 'segs': [{'end': 245.001, 'src': 'embed', 'start': 195.19, 'weight': 0, 'content': [{'end': 198.83, 'text': 'So console log testing from our function.', 'start': 195.19, 'duration': 3.64}, {'end': 199.991, 'text': 'All right.', 'start': 199.651, 'duration': 0.34}, {'end': 202.691, 'text': 'And then if our Ajax request is successful.', 'start': 200.051, 'duration': 2.64}, {'end': 206.532, 'text': "So within this area, let's actually call this new function.", 'start': 203.211, 'duration': 3.321}, {'end': 213.513, 'text': "So instead of logging out our data to the console, let's call our brand new create HTML function.", 'start': 207.092, 'duration': 6.421}, {'end': 218.274, 'text': "And most importantly, within these parentheses, let's pass it the data.", 'start': 214.073, 'duration': 4.201}, {'end': 221.332, 'text': 'the JSON that we retrieved from this URL.', 'start': 218.991, 'duration': 2.341}, {'end': 229.275, 'text': "OK So now down within our create HTML function within these parentheses we can add a parameter we can name it anything we'd like.", 'start': 222.052, 'duration': 7.223}, {'end': 238.058, 'text': "I'll name it pets data and then we can use this name within the body of this function to access that JSON data.", 'start': 229.875, 'duration': 8.183}, {'end': 243.9, 'text': 'So underneath this testing line we can also say console dot log pets data.', 'start': 238.478, 'duration': 5.422}, {'end': 245.001, 'text': 'All right.', 'start': 244.76, 'duration': 0.241}], 'summary': 'Testing function to process json data retrieved from url.', 'duration': 49.811, 'max_score': 195.19, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wSNa5b1mS5Y/pics/wSNa5b1mS5Y195190.jpg'}, {'end': 294.762, 'src': 'embed', 'start': 264.522, 'weight': 3, 'content': [{'end': 269.346, 'text': 'So the first thing we need to do is include the handlebars package in our page.', 'start': 264.522, 'duration': 4.824}, {'end': 272.288, 'text': 'That means we need to go download handlebars.', 'start': 270.006, 'duration': 2.282}, {'end': 275.431, 'text': 'So Google for handlebars J.S.', 'start': 272.629, 'duration': 2.802}, {'end': 277.753, 'text': 'that should lead you to this website.', 'start': 276.051, 'duration': 1.702}, {'end': 282.617, 'text': 'Go ahead and click on installation and then click download.', 'start': 278.213, 'duration': 4.404}, {'end': 283.959, 'text': "Now don't worry.", 'start': 283.339, 'duration': 0.62}, {'end': 285.059, 'text': 'I know what year it is.', 'start': 284.159, 'duration': 0.9}, {'end': 289.08, 'text': 'I know that no one manually downloads packages like this anymore.', 'start': 285.48, 'duration': 3.6}, {'end': 294.762, 'text': "So later in the video I'll show you how to use handlebars with NPM and Webpack.", 'start': 289.581, 'duration': 5.181}], 'summary': 'Download and include handlebars in webpage; later, learn to use with npm and webpack', 'duration': 30.24, 'max_score': 264.522, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wSNa5b1mS5Y/pics/wSNa5b1mS5Y264522.jpg'}], 'start': 168.143, 'title': 'Creating html from json data and using handlebars for html templates', 'summary': 'Demonstrates creating an html function for json data, achieving successful data retrieval. it also introduces using the handlebars package in an html file and creating a simple handlebars template to output pet names from a json array.', 'chapters': [{'end': 263.702, 'start': 168.143, 'title': 'Creating html from json data', 'summary': 'Demonstrates how to create an html function to handle json data and how to use a new function to organize and access the data, achieving successful data retrieval and access through the create html function.', 'duration': 95.559, 'highlights': ['The chapter focuses on creating a new function called create HTML to organize and access the JSON data, which enables successful data retrieval and access.', 'The new create HTML function is called upon successful Ajax request instead of logging out the data to the console, demonstrating successful data access and organization.', 'The function create HTML is designed to accept a parameter, pets data, to access the JSON data within its body, facilitating effective data manipulation and utilization.', 'The demonstration emphasizes the successful functionality of the create HTML function, showcasing its ability to access and manipulate the required JSON data for further use.']}, {'end': 478.437, 'start': 264.522, 'title': 'Using handlebars for html templates', 'summary': 'Introduces the process of including and using the handlebars package in an html file, demonstrating how to create a simple handlebars template to output the name of each pet from a json array.', 'duration': 213.915, 'highlights': ['The chapter introduces the process of including and using the handlebars package in an HTML file It provides a step-by-step guide on downloading and including the handlebars package in an HTML file, emphasizing the simplicity of the initial setup.', 'Demonstrating how to create a simple handlebars template to output the name of each pet from a JSON array It explains the process of creating a handlebars template to loop through a JSON array and output the name of each pet using handlebars specific code, showcasing the ease of accessing JSON data within handlebars.']}], 'duration': 310.294, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wSNa5b1mS5Y/pics/wSNa5b1mS5Y168143.jpg', 'highlights': ['The create HTML function organizes and accesses JSON data for successful retrieval.', 'The create HTML function is called upon successful Ajax request, demonstrating successful data access.', 'The function create HTML is designed to accept a parameter, pets data, facilitating effective data manipulation.', 'The chapter introduces the process of including and using the handlebars package in an HTML file.']}, {'end': 747.77, 'segs': [{'end': 633.373, 'src': 'embed', 'start': 604.69, 'weight': 1, 'content': [{'end': 609.293, 'text': 'And what do we want it to equal? Well, we want to use our compiled template.', 'start': 604.69, 'duration': 4.603}, {'end': 613.315, 'text': "So we say compiled template and it's a function.", 'start': 609.693, 'duration': 3.622}, {'end': 615.737, 'text': 'So we just want to pass it our JSON data.', 'start': 613.656, 'duration': 2.081}, {'end': 617.238, 'text': 'So pets.', 'start': 616.317, 'duration': 0.921}, {'end': 626.87, 'text': 'data And now we have a variable our generated html which hopefully contains three h two elements with the name of each pet.', 'start': 618.126, 'duration': 8.744}, {'end': 633.373, 'text': 'So now all we need to do is add this string of html into the empty div on our page.', 'start': 627.35, 'duration': 6.023}], 'summary': 'Use compiled template function to pass json data, generate html with pet names, and add it to the empty div.', 'duration': 28.683, 'max_score': 604.69, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wSNa5b1mS5Y/pics/wSNa5b1mS5Y604690.jpg'}, {'end': 732.777, 'src': 'embed', 'start': 688.089, 'weight': 0, 'content': [{'end': 692.851, 'text': 'Perfect So we have the heading level two elements for purrs loud barks a lot and meows a lot.', 'start': 688.089, 'duration': 4.762}, {'end': 698.498, 'text': 'And if we check out the developer tools here we see the three H twos beautiful.', 'start': 693.476, 'duration': 5.022}, {'end': 703.341, 'text': "Now let's go back to our code and let me walk through these steps again super quickly.", 'start': 698.759, 'duration': 4.582}, {'end': 704.421, 'text': 'Big picture.', 'start': 703.821, 'duration': 0.6}, {'end': 710.924, 'text': "OK So first we start with this variable and that's just as simple as selecting this template code.", 'start': 704.561, 'duration': 6.363}, {'end': 714.006, 'text': 'And at this point this is just a simple string of text.', 'start': 711.305, 'duration': 2.701}, {'end': 715.647, 'text': "There's nothing magical about it.", 'start': 714.126, 'duration': 1.521}, {'end': 716.427, 'text': 'All right.', 'start': 716.167, 'duration': 0.26}, {'end': 725.272, 'text': 'So then the next step is that we use handlebars to take that simple string of text and create a dynamic, flexible template.', 'start': 716.467, 'duration': 8.805}, {'end': 726.053, 'text': 'All right.', 'start': 725.773, 'duration': 0.28}, {'end': 727.994, 'text': "And it's actually a template function.", 'start': 726.093, 'duration': 1.901}, {'end': 732.777, 'text': 'Right Because then we use it here and then we just need to populate it with a bit of data.', 'start': 728.334, 'duration': 4.443}], 'summary': 'Using handlebars to create dynamic templates for purrs, barks, and meows.', 'duration': 44.688, 'max_score': 688.089, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wSNa5b1mS5Y/pics/wSNa5b1mS5Y688089.jpg'}], 'start': 478.437, 'title': 'Html generation with handlebars', 'summary': 'Demonstrates using handlebars to convert a static string into a dynamic html template, populated with json data, resulting in 3 h2 elements reflecting pet names.', 'chapters': [{'end': 747.77, 'start': 478.437, 'title': 'Html generation with handlebars', 'summary': 'Demonstrates the process of using handlebars to convert a static string of text into a dynamic html template, which is then populated with json data and added into the dom, resulting in 3 h2 elements reflecting the pet names.', 'duration': 269.333, 'highlights': ['The process starts with selecting the template code and creating a dynamic handlebars template function, then populating it with JSON data, resulting in a string of HTML. The chapter demonstrates the process of using Handlebars to convert a static string of text into a dynamic HTML template, which is then populated with JSON data and added into the DOM, resulting in 3 h2 elements reflecting the pet names.', "The code illustrates the usage of Handlebars' compile method to create a compiled template and then leveraging it to generate the final HTML using the JSON data. The chapter explains the usage of Handlebars' compile method to create a compiled template and then using it to generate the final HTML by passing the JSON data, resulting in 3 h2 elements reflecting the pet names.", 'The final step involves adding the generated HTML into the empty div on the page, resulting in the 3 h2 elements being displayed as expected. The chapter details the final step of adding the generated HTML into the empty div on the page, resulting in the 3 h2 elements reflecting the pet names being displayed as expected.']}], 'duration': 269.333, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wSNa5b1mS5Y/pics/wSNa5b1mS5Y478437.jpg', 'highlights': ['The chapter demonstrates the process of using Handlebars to convert a static string of text into a dynamic HTML template, which is then populated with JSON data and added into the DOM, resulting in 3 h2 elements reflecting the pet names.', "The chapter explains the usage of Handlebars' compile method to create a compiled template and then using it to generate the final HTML by passing the JSON data, resulting in 3 h2 elements reflecting the pet names.", 'The chapter details the final step of adding the generated HTML into the empty div on the page, resulting in the 3 h2 elements reflecting the pet names being displayed as expected.']}, {'end': 1289.543, 'segs': [{'end': 801.252, 'src': 'embed', 'start': 773.847, 'weight': 0, 'content': [{'end': 777.949, 'text': "So for each pet, let's create a div that has a class of pet.", 'start': 773.847, 'duration': 4.102}, {'end': 780.19, 'text': 'All right.', 'start': 779.869, 'duration': 0.321}, {'end': 783.071, 'text': 'And then remember, we want a two column layout for each pet.', 'start': 780.25, 'duration': 2.821}, {'end': 787.613, 'text': "So let's create one div that has a class of photo column.", 'start': 783.271, 'duration': 4.342}, {'end': 795.457, 'text': "And then underneath that, let's create another div that has a class of info column.", 'start': 789.794, 'duration': 5.663}, {'end': 798.07, 'text': 'All right.', 'start': 797.79, 'duration': 0.28}, {'end': 801.252, 'text': "And then within the photo column let's add the image of the pet.", 'start': 798.11, 'duration': 3.142}], 'summary': 'Create a two-column layout for each pet with a photo and info column.', 'duration': 27.405, 'max_score': 773.847, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wSNa5b1mS5Y/pics/wSNa5b1mS5Y773847.jpg'}, {'end': 895.252, 'src': 'embed', 'start': 863.561, 'weight': 1, 'content': [{'end': 866.202, 'text': "Next let's output each pet's favorite foods.", 'start': 863.561, 'duration': 2.641}, {'end': 873.305, 'text': "So if we check our data we see that there's a property named fave foods which is an array of different foods.", 'start': 866.702, 'duration': 6.603}, {'end': 876.766, 'text': 'So in our code underneath the name heading.', 'start': 873.605, 'duration': 3.161}, {'end': 884.662, 'text': "Let's add in an H4 element and give it a class of headline bar.", 'start': 878.476, 'duration': 6.186}, {'end': 890.268, 'text': 'These class names will match up with the CSS that you copied and pasted from earlier in the lesson.', 'start': 885.363, 'duration': 4.905}, {'end': 895.252, 'text': 'And then within this heading level for just say favorite foods.', 'start': 890.808, 'duration': 4.444}], 'summary': "Code will output each pet's favorite foods using h4 element with class 'headline bar'.", 'duration': 31.691, 'max_score': 863.561, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wSNa5b1mS5Y/pics/wSNa5b1mS5Y863561.jpg'}, {'end': 1042.896, 'src': 'embed', 'start': 990.26, 'weight': 2, 'content': [{'end': 995.645, 'text': "So if an item doesn't have any favorite foods it doesn't make sense to output this favorite foods header.", 'start': 990.26, 'duration': 5.385}, {'end': 999.308, 'text': 'Now watch how easy handlebars makes conditional logic.', 'start': 996.205, 'duration': 3.103}, {'end': 1005.256, 'text': 'So we only want to output this content if a favorite foods array exists.', 'start': 1001.192, 'duration': 4.064}, {'end': 1016.227, 'text': "So we can just say if fave foods if it exists do this and then we just close out the if statement and that's it.", 'start': 1005.496, 'duration': 10.731}, {'end': 1019.883, 'text': "We're almost done.", 'start': 1019.022, 'duration': 0.861}, {'end': 1023.706, 'text': 'The only thing left to do now is output the age for each pet.', 'start': 1020.103, 'duration': 3.603}, {'end': 1029.29, 'text': "So in our template in between their name and their favorite foods let's add a new line.", 'start': 1024.346, 'duration': 4.944}, {'end': 1037.915, 'text': "Let's create a paragraph and say age and if we look at our Jason we'll notice that There is no age property.", 'start': 1029.751, 'duration': 8.164}, {'end': 1039.976, 'text': "Instead there's a birth year property.", 'start': 1037.994, 'duration': 1.982}, {'end': 1042.896, 'text': 'And instead of just outputting the birth year,', 'start': 1040.736, 'duration': 2.16}], 'summary': 'Using handlebars, conditional logic is applied to output favorite foods only if the array exists. additionally, the birth year property is used to calculate and output the age for each pet.', 'duration': 52.636, 'max_score': 990.26, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wSNa5b1mS5Y/pics/wSNa5b1mS5Y990260.jpg'}, {'end': 1216.042, 'src': 'embed', 'start': 1185.793, 'weight': 3, 'content': [{'end': 1186.113, 'text': 'All right.', 'start': 1185.793, 'duration': 0.32}, {'end': 1187.274, 'text': 'So this is the current year.', 'start': 1186.153, 'duration': 1.121}, {'end': 1190.077, 'text': "And then we just want to subtract the animal's birth year.", 'start': 1187.334, 'duration': 2.743}, {'end': 1200.847, 'text': "Now it's important to point out that at the moment this helper function doesn't have access to the animal's birth year within our template.", 'start': 1192.779, 'duration': 8.068}, {'end': 1207.679, 'text': "When we call the calculate age helper function we need to pass it the animal's birth year.", 'start': 1201.837, 'duration': 5.842}, {'end': 1214.161, 'text': 'So just include a space after the helper name and then include the property that you want to pass into the helper function.', 'start': 1208.199, 'duration': 5.962}, {'end': 1216.042, 'text': 'All right.', 'start': 1215.682, 'duration': 0.36}], 'summary': "Helper function calculates animal's age by subtracting birth year", 'duration': 30.249, 'max_score': 1185.793, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wSNa5b1mS5Y/pics/wSNa5b1mS5Y1185793.jpg'}, {'end': 1289.543, 'src': 'embed', 'start': 1260.267, 'weight': 5, 'content': [{'end': 1269.933, 'text': "So in our JavaScript let's delete this line where we return the age and instead let's begin an if statement and we'll say if age is greater than zero.", 'start': 1260.267, 'duration': 9.666}, {'end': 1284.878, 'text': "Return their age plus the phrase years old but else otherwise let's return a string that says less than a year old.", 'start': 1272.307, 'duration': 12.571}, {'end': 1289.543, 'text': 'OK So that way on the front end it seems less mathematical and more human.', 'start': 1284.898, 'duration': 4.645}], 'summary': 'Javascript function to return age or less than a year old', 'duration': 29.276, 'max_score': 1260.267, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wSNa5b1mS5Y/pics/wSNa5b1mS5Y1260267.jpg'}], 'start': 748.61, 'title': 'Handlebars template and age calculation', 'summary': 'Covers expanding a template using handlebars, creating a two-column layout for pets, accessing json data to display pet information, and implementing conditional logic for missing data. it also discusses adding an age calculation functionality in a handlebars template to determine and display the age of pets based on their birth year, utilizing a helper function and implementing conditional statements for displaying the age.', 'chapters': [{'end': 1019.883, 'start': 748.61, 'title': 'Handlebars template expansion', 'summary': 'Covers expanding a template using handlebars, creating a two-column layout for pets, accessing json data to display pet information, and implementing conditional logic for handling missing data.', 'duration': 271.273, 'highlights': ["Creating a two-column layout for each pet by adding divs with specific classes and including the pet image and information. The chapter discusses creating a two-column layout for each pet by adding divs with classes like 'pet', 'photo column', and 'info column', and adding the pet image and information within these divs.", "Accessing JSON data to display pet information such as name, species, and favorite foods using Handlebars expressions. The transcript explains using Handlebars expressions to access JSON data properties such as 'photo' for the pet image, 'species' for the pet's species, and 'fave foods' for displaying a list of favorite foods.", "Implementing conditional logic to handle missing data, where the 'favorite foods' header is only displayed if the 'fave foods' array exists for a pet. The chapter demonstrates using conditional logic in Handlebars to display the 'favorite foods' section only if the 'fave foods' array exists in the JSON data for a pet, thus handling missing data effectively."]}, {'end': 1289.543, 'start': 1020.103, 'title': 'Handlebars age calculation', 'summary': 'Discusses adding an age calculation functionality in a handlebars template to determine and display the age of pets based on their birth year, utilizing a helper function and implementing conditional statements for displaying the age in a more human-readable format.', 'duration': 269.44, 'highlights': ["Implementing a helper function named 'calculate age' to determine the age of pets based on their birth year. The chapter explains the creation of a helper function in Handlebars named 'calculate age' to compute the age of pets based on their birth year, enhancing the template's functionality.", "Utilizing conditional statements to display the pet's age in a more human-readable format. The transcript highlights the usage of conditional statements in JavaScript to display the pet's age in a human-readable format, such as 'less than a year old' when the calculated age is zero.", "Defining a conditional statement to handle cases where the calculated age is zero, displaying 'less than a year old' instead of '0 years old'. The chapter explains the implementation of an if statement in JavaScript to handle cases where the calculated age is zero, ensuring the display of 'less than a year old' instead of '0 years old' for a more user-friendly experience."]}], 'duration': 540.933, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wSNa5b1mS5Y/pics/wSNa5b1mS5Y748610.jpg', 'highlights': ['Creating a two-column layout for each pet by adding divs with specific classes and including the pet image and information.', 'Accessing JSON data to display pet information such as name, species, and favorite foods using Handlebars expressions.', "Implementing conditional logic to handle missing data, where the 'favorite foods' header is only displayed if the 'fave foods' array exists for a pet.", "Implementing a helper function named 'calculate age' to determine the age of pets based on their birth year.", "Utilizing conditional statements to display the pet's age in a more human-readable format.", "Defining a conditional statement to handle cases where the calculated age is zero, displaying 'less than a year old' instead of '0 years old'."]}, {'end': 1680.627, 'segs': [{'end': 1384.63, 'src': 'heatmap', 'start': 1335.671, 'weight': 0, 'content': [{'end': 1340.075, 'text': 'the entire point of this is that it allows you to keep your code much more organized.', 'start': 1335.671, 'duration': 4.404}, {'end': 1348.142, 'text': "So the first step is to use NPM and we're going to install three packages NPM install.", 'start': 1340.776, 'duration': 7.366}, {'end': 1351.765, 'text': 'Obviously the first package we want is handlebars.', 'start': 1348.902, 'duration': 2.863}, {'end': 1360.762, 'text': 'The second package is handlebars loader and the third package is named path.', 'start': 1352.95, 'duration': 7.812}, {'end': 1364.629, 'text': "And I'll save these to my package dot JSON file.", 'start': 1361.964, 'duration': 2.665}, {'end': 1367.513, 'text': 'All right.', 'start': 1367.153, 'duration': 0.36}, {'end': 1372.538, 'text': 'And then in my text editor, within my web pack config JS file.', 'start': 1367.594, 'duration': 4.944}, {'end': 1377.944, 'text': "I'm just going to paste in this code, because this is a tutorial on handlebars, not web pack itself.", 'start': 1372.538, 'duration': 5.406}, {'end': 1384.63, 'text': 'In the description, you can find a link to a GitHub repo where I will include all of this code and all of these files.', 'start': 1378.444, 'duration': 6.186}], 'summary': 'Using npm, install handlebars, handlebars loader, and path to organize code in webpack config file.', 'duration': 31.842, 'max_score': 1335.671, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wSNa5b1mS5Y/pics/wSNa5b1mS5Y1335671.jpg'}, {'end': 1415.175, 'src': 'embed', 'start': 1389.335, 'weight': 2, 'content': [{'end': 1397.221, 'text': "And we're treating our main JS file as the entry point and we're going to create a bundled version of it named main dash bundled.", 'start': 1389.335, 'duration': 7.886}, {'end': 1398.402, 'text': 'All right.', 'start': 1398.082, 'duration': 0.32}, {'end': 1404.667, 'text': 'And with this web pack set up you might be wondering where does the actual handlebar template code live.', 'start': 1398.502, 'duration': 6.165}, {'end': 1411.513, 'text': 'Well instead of adding it to the HTML file like we did before now we can stay much more organized.', 'start': 1405.248, 'duration': 6.265}, {'end': 1415.175, 'text': 'So within the JS folder I will create a new file.', 'start': 1412.153, 'duration': 3.022}], 'summary': 'Using webpack to bundle js file and stay organized in project structure.', 'duration': 25.84, 'max_score': 1389.335, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wSNa5b1mS5Y/pics/wSNa5b1mS5Y1389335.jpg'}, {'end': 1468.675, 'src': 'heatmap', 'start': 1416.215, 'weight': 0.832, 'content': [{'end': 1423.039, 'text': "I could name this file anything I'd like but I will call it my template dot HBS for handlebars.", 'start': 1416.215, 'duration': 6.824}, {'end': 1426.761, 'text': 'Let me paste in the template code.', 'start': 1424.94, 'duration': 1.821}, {'end': 1428.963, 'text': 'Right So this should look familiar.', 'start': 1427.582, 'duration': 1.381}, {'end': 1432.565, 'text': 'OK And then within my main dot J.S.', 'start': 1429.923, 'duration': 2.642}, {'end': 1440.149, 'text': 'file the file with all of our custom JavaScript up at the very top I can just require in or bundle in that template file.', 'start': 1432.605, 'duration': 7.544}, {'end': 1444.412, 'text': "So let's create a variable and let's name it my template.", 'start': 1440.73, 'duration': 3.682}, {'end': 1448.871, 'text': "And we're just going to require in the HBS file we just created.", 'start': 1445.467, 'duration': 3.404}, {'end': 1452.975, 'text': 'So it was named my template.', 'start': 1450.252, 'duration': 2.723}, {'end': 1459.162, 'text': 'And now we can use this variable down within our create HTML function.', 'start': 1454.276, 'duration': 4.886}, {'end': 1461.064, 'text': "So let's rewrite this really quick.", 'start': 1459.602, 'duration': 1.462}, {'end': 1465.849, 'text': 'First we just want to select the empty pets container div.', 'start': 1461.744, 'duration': 4.105}, {'end': 1468.675, 'text': 'that we want to add our HTML to.', 'start': 1466.854, 'duration': 1.821}], 'summary': "Using handlebars, require and use a template file named 'my template' to add html to a pets container div in the main .js file.", 'duration': 52.46, 'max_score': 1416.215, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wSNa5b1mS5Y/pics/wSNa5b1mS5Y1416215.jpg'}, {'end': 1570.998, 'src': 'heatmap', 'start': 1498.384, 'weight': 0.706, 'content': [{'end': 1505.049, 'text': 'so web pack and specifically the handlebars loader will pre compile the template code for us.', 'start': 1498.384, 'duration': 6.665}, {'end': 1506.17, 'text': 'All right.', 'start': 1505.81, 'duration': 0.36}, {'end': 1510.574, 'text': "And let's not forget about our helper function that calculates the pets age.", 'start': 1506.29, 'duration': 4.284}, {'end': 1516.99, 'text': 'If we look back in our Webpack config file, we can see that we are looking within a folder named J.S.', 'start': 1511.249, 'duration': 5.741}, {'end': 1522.311, 'text': 'Helpers So within our JavaScript folder, I will create a new sub folder.', 'start': 1517.07, 'duration': 5.241}, {'end': 1523.892, 'text': 'I will name it helpers.', 'start': 1522.871, 'duration': 1.021}, {'end': 1528.272, 'text': "And then within that folder, I'll create a new file.", 'start': 1525.932, 'duration': 2.34}, {'end': 1533.473, 'text': 'I will name it Cal Q late age dot J.S.', 'start': 1529.233, 'duration': 4.24}, {'end': 1535.994, 'text': 'But you could name it whatever the name of your helper should be.', 'start': 1533.473, 'duration': 2.521}, {'end': 1542.285, 'text': 'OK And then we can just say module exports equals and then just paste in our helper function.', 'start': 1537.819, 'duration': 4.466}, {'end': 1544.548, 'text': 'Right So all of this should look familiar.', 'start': 1542.845, 'duration': 1.703}, {'end': 1548.833, 'text': "So I'll save this and I will also save my main JavaScript file.", 'start': 1545.008, 'duration': 3.825}, {'end': 1552.698, 'text': 'And now if I go to the command line and run web pack.', 'start': 1549.654, 'duration': 3.044}, {'end': 1559.575, 'text': 'that will create a brand new file named main dash bundled J.S.', 'start': 1554.994, 'duration': 4.581}, {'end': 1564.417, 'text': 'and that is the one and only single file I need to include in my HTML.', 'start': 1560.175, 'duration': 4.242}, {'end': 1570.998, 'text': 'So right before the closing body tag script source go into the J.S.', 'start': 1565.037, 'duration': 5.961}], 'summary': 'Webpack pre-compiles handlebars templates and bundles js files, reducing html dependencies.', 'duration': 72.614, 'max_score': 1498.384, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wSNa5b1mS5Y/pics/wSNa5b1mS5Y1498384.jpg'}, {'end': 1628.26, 'src': 'embed', 'start': 1584.44, 'weight': 1, 'content': [{'end': 1592.785, 'text': 'OK, so I forgot that when you use the handlebars loader back in our template file, when you actually call your helper function,', 'start': 1584.44, 'duration': 8.345}, {'end': 1599.789, 'text': "now that we're using Web pack in the module pattern, meaning the code for this helper function lives in its own separate module file.", 'start': 1592.785, 'duration': 7.004}, {'end': 1605.792, 'text': 'We want to begin this with a dollar sign so dollar sign and then the name of the helper function.', 'start': 1600.529, 'duration': 5.263}, {'end': 1609.554, 'text': "So let's save that and rerun Web pack.", 'start': 1606.312, 'duration': 3.242}, {'end': 1613.076, 'text': 'Now if we refresh the page.', 'start': 1611.515, 'duration': 1.561}, {'end': 1614.616, 'text': 'There we have it.', 'start': 1614.056, 'duration': 0.56}, {'end': 1624.359, 'text': 'Beautiful So just to recap the big advantages of using this type of setup are that you only have to require in one JavaScript file in your HTML.', 'start': 1614.996, 'duration': 9.363}, {'end': 1628.26, 'text': "Right So we don't have to manually import the handlebars file.", 'start': 1624.919, 'duration': 3.341}], 'summary': 'Using webpack and handlebars loader simplifies javascript file imports in html.', 'duration': 43.82, 'max_score': 1584.44, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wSNa5b1mS5Y/pics/wSNa5b1mS5Y1584440.jpg'}], 'start': 1289.563, 'title': 'Integrating handlebars with webpack and javascript organization', 'summary': 'Covers integrating handlebars with npm and webpack, showing how to use handlebars with an npm and webpack type of setup, including installing required packages and setting up the handlebars webpack configuration. it also discusses setting up webpack, organizing javascript files into subfolders, and using helper functions, resulting in the creation of a single bundled javascript file and improved code organization, reducing manual imports and clutter in html. the setup also enables separate module files for helper functions and templates, providing advantages such as reduced html clutter and easy importing of javascript file in html.', 'chapters': [{'end': 1506.17, 'start': 1289.563, 'title': 'Integrating handlebars with npm and webpack', 'summary': 'Covers integrating handlebars with npm and webpack, showing how to use handlebars with an npm and webpack type of setup, including installing required packages and setting up the handlebars webpack configuration.', 'duration': 216.607, 'highlights': ['The chapter covers integrating handlebars with NPM and Webpack It provides a guide on how to use handlebars with an NPM and Webpack type of setup.', 'Showing how to use handlebars with an NPM and Webpack type of setup The tutorial walks through the process of integrating handlebars with NPM and Webpack, demonstrating the steps involved in using handlebars with an NPM and Webpack type of setup.', 'Installing required packages using NPM install The tutorial explains the installation of three packages using NPM - handlebars, handlebars loader, and path.', 'Setting up the handlebars webpack configuration It details the process of setting up the handlebars webpack configuration, including the use of handlebars loader, treating the main JS file as the entry point, and creating a bundled version of it.', 'Pre-compiling the template code using Webpack and handlebars loader It showcases how web pack and specifically the handlebars loader pre-compile the template code, making the code more organized and easier to use.']}, {'end': 1680.627, 'start': 1506.29, 'title': 'Webpack setup and javascript organization', 'summary': 'Discusses setting up webpack, organizing javascript files into subfolders, and using helper functions, resulting in the creation of a single bundled javascript file and improved code organization, reducing manual imports and clutter in html. the setup also enables separate module files for helper functions and templates, providing advantages such as reduced html clutter and easy importing of javascript file in html.', 'duration': 174.337, 'highlights': ["Setting up Webpack and creating a single bundled JavaScript file By running Webpack, a single bundled JavaScript file named 'main-bundled.js' is created, simplifying the inclusion in HTML and reducing manual imports.", 'Organizing JavaScript files into subfolders and creating separate module files for helper functions and templates The JavaScript files are organized into subfolders, and helper functions and templates are placed in separate module files, improving code organization and reducing clutter in HTML.', 'Using helper functions and handlebars loader in Webpack The usage of helper functions in Webpack requires calling the function with a dollar sign and the function name, ensuring proper integration with the module pattern.']}], 'duration': 391.064, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wSNa5b1mS5Y/pics/wSNa5b1mS5Y1289563.jpg', 'highlights': ['The tutorial explains the installation of three packages using NPM - handlebars, handlebars loader, and path.', "By running Webpack, a single bundled JavaScript file named 'main-bundled.js' is created, simplifying the inclusion in HTML and reducing manual imports.", 'The JavaScript files are organized into subfolders, and helper functions and templates are placed in separate module files, improving code organization and reducing clutter in HTML.', 'It details the process of setting up the handlebars webpack configuration, including the use of handlebars loader, treating the main JS file as the entry point, and creating a bundled version of it.', 'The usage of helper functions in Webpack requires calling the function with a dollar sign and the function name, ensuring proper integration with the module pattern.']}], 'highlights': ['Handlebars is used to transform raw JSON data into well-formatted HTML, simplifying the process.', 'The chapter demonstrates the process of using Handlebars to convert a static string of text into a dynamic HTML template, which is then populated with JSON data and added into the DOM, resulting in 3 h2 elements reflecting the pet names.', 'The tutorial explains the installation of three packages using NPM - handlebars, handlebars loader, and path.', 'Creating a two-column layout for each pet by adding divs with specific classes and including the pet image and information.', "By running Webpack, a single bundled JavaScript file named 'main-bundled.js' is created, simplifying the inclusion in HTML and reducing manual imports."]}