Just wanted to say thank you for making all these videos. All your videos have been immensely helpful. I really like how you keep each video concise (not going over basic concepts in every video), but you still take the time to explain exactly what you are doing.
I just don't understand why people will give a thumbs down to this video? You know Its a free tutorial! Thanks @LearnWebCode I've been following your latest 30 min series and I learned a lot (especially the JSON/AJAX video). Thank you so much!
I just want to reiterate what a few others have said. I know its easy to say but I really mean it when I say your tutorials are great. I've just been doing your Udemy course and although I knew a lot of the course, you've given me a much better understanding. Keep up the fantastic work, it really is very much appreciated.
Thank you very much for all your time and enthusiastic tutorials. Your language is so clear that I asynchronously can take advantage of learning english as well. Leting animals be part of your lessons makes you very sympathic. Bravo!
You prolly dont give a shit but if you are bored like me atm you can stream pretty much all of the latest movies on Instaflixxer. Have been binge watching with my girlfriend lately :)
Hey Brad, I find your courses to be extremely engaging and useful. Possibly one of the best I have seen around so two thumbs-up. Having said this, I have recently taken an opportunity where Ember.JS is the framework of choice for developing web apps and find it difficult to master/ understand. Is there any chance you could make a tutorial/ video/ courses on Ember from beginner to expert level? Thanks!
This is so helpful. Thankyou so much for such a great video 🙂 I've been trying to do this with help of handlebar docs and those are too confusing for the beginners.
Great tutorial. Is it possible to make a individual page for each pet? For example when click the image or title of the pet it will go to the individual page to view more information about the pet.
Why would I use that new complicated handlebars.js instead of just putting in an easy String that contains all the tags (like in that previous ajax/json video)?...
You would want to use handlebars if your application requires logic and has a lot of elements. Handlebars basically allows you writting plain html code for the templates without looking after all the special characters, looping, if-conditioning and so on.
Superbly explained as always but I'll be sticking to template literals, available in core js since ES6 (2015), very easy, and, in my view better than learning yet another unnecessary contrivance. I understand the pressure new developers feel to become familiar with all the available framework libraries but it's often at the expense of learning core js well (as half an hour looking at framework questions on SO shows only too well).
Hey this is a great tutorial, but it needs to be updated to reflect the changes in Webpack version 2. In the configuration file the way you output your bundle is different. And reslolve no longer has fallback, now it is an array resolve.modules
Hey, thanks for this tutorial. I have some questions... Should I create one file per each helper function? Should I create one file .hbs per each template? Thanks
Love your vids dude you are for sure an incredible mentor to the young devs! @LearnWebCode I see the power of handlebars but curious why/when would I use handlebars? Some practicle/real world examples? Thanks!
Handlebars forming a rectangle suddenly appear on the screen and if one touches any part then entire text typed on the screen disappears. Why does this happen?
Hi Brad. Awesome tutorials. I was just wondering - was Handlebars partly inspired by Angular/React/Vue (or perhaps vice versa)? I'm a newbie, but I'm noticing some similarities between the JS frameworks.
Hi Brad, following along fine with your tutorial very well explained - however when I try to use NPM and webpack for workflow in the last part of this tutorial - the terminal command "npm install handlebars handlebars-loader path --save-dev" it only generates the node_modules/ folder within my site. It does not create a package.json or a webpack.config file in the root of my site. Did you create these files manually or have I missed something? Thanks, Mark.
Hey there! First of all, thanks for everything you do, you truly are the man! Second of all, could you maybe give me a little hint of what I'd have to do in the following situation: What if I wanted to output a single pet in the container and then on click of a button dynamically change the content to display another pet by its name in the array of my JSON-file? Thanks!!
It was a very helpful tutorial for my web project so thank you very much. My question now is about how to do a if helper function for to filter species. Like display it if species=cat, hide if species=dog... that would be very great for me...
I got this error WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema. - configuration.resolve has an unknown property 'fallback'. These properties are valid: object { alias?, aliasFields?, cachePredicate?, cacheWithContext?, descriptionFiles?, enforceExtension?, enforceModuleExtension?, extensions?, fileSystem?, mainFields?, mainFiles?, moduleExtensions?, modules?, plugins?, resolver?, symlinks?, unsafeCache?, useSyncFileSystemCalls? } Can you tell me which is the alternative for fallback?
webpack integration at the end makes this tutorial onair -- Thanks . But i have a question ? For large e-commerce business web application can i use this kind of templating structure and is it's performance will be ok ??
Hi Brad, I can't figure this error out: "hb.js:21 Uncaught ReferenceError: Handlebars is not defined". I'm stuck at the first Handlebars test 11:27 into the video. I have tried quite a few things, even pasting in your sample code to replace my typed version. I have tried both the Handlebars.runtime and non runtime packages. I have moved the script tag around in the html doc. This error persists. What can you suggest?
Hi Ken, try using the non-runtime package (since we're compiling the templates on-the-fly in our simple example). After that, make sure you are able to select the empty "pets-container" div - looks like that element has a class in your HTML but we're referencing an ID in our JS. Also, add a closing } after the body of your final function - I made those few changes and your CodePen code worked for me.
Also, if you want to test directly in CodePen (instead of copy/pasting to local files) you can remove the reference to the handlebars package in your CodePen HTML, and in the CodePen JS tab, if you click the gear/settings icon, towards the bottom of the pop-up screen there's a "Quick-add" menu and you can choose Handlebars. Makes testing right in CodePen pretty nice!
Awesome! You are super supportive! Thank you it works!!! I will try your tip and practice/test in CodePen. I hope my ability to spot details in the code improve. Guess I need to practice, practice, practice.
Hey! Love your work. In this video I am not being able to see the element, i.e. in this case the names of pets, even though I have followed each and every step thoroughly. Please help?
No problem! I'd recommend first searching for "Node.js & NPM" tutorials. Once you're familiar with how to install packages, at that point you can look for "Webpack" tutorials. There are lots of free tutorials out there, but my premium course (link in description) is designed to teach all the different technologies in one central place, so you can see how they come together in a real-world example project.
LearnWebCode Thank you for your reply. I was going to ask about your course as i am interested in it but just want to ask something, i have some knowledge about php and have built one ecommerce website, in your course you will going to use node.js right? and i have also heard alot about node.js , so should i move towards node.js or should i stay with php and start polishing it by learning more about it like it's frameworks laravel and all. I am going to take your course so can i code the backend part in php and be still in the race or should i move to node.js. Thank you.
My current course is all front-end, so it's really more of just an introduction to what Node is and what it can be used for - but in the end we only use it for front-end workflow automation tasks (to save time and let our code stay super organized). If you're interested in learning about backend Node my current course won't help much. There's another channel on TH-cam named "Mindspace" and he has great tutorials on Node (check out his Node Shopping Cart series). I have plans to create a backend Node course in the future, but need to finish a few WordPress projects first :) Either PHP or Node will work well. If someone was learning from scratch I'd probably recommend Node, but if you already have a decent PHP foundation I think sticking with it is a good idea. It may not be the #1 trending language like JS but there are still TONS of jobs / projects that call for PHP.
For those who are using webpack version 2, use this code below otherwise you'll run into the these 2 errors :) - configuration.output.path: The provided value "./js" is not an absolute path! - configuration.resolve has an unknown property 'fallback'. var path = require("path"); module.exports = { entry: "./js/main.js", output: { path: path.resolve(__dirname, "./js"), filename: "main-bundled.js" }, resolve: { modules: [ path.join(__dirname, "./js/helpers") ] }, module: { loaders: [ {test: /\.hbs$/, loader: "handlebars-loader"} ] } };
Thanks for this video! Im a little stuck though... I have everything working except for the resolve.fallback, the log spits "Helper Missing". *my helper is in folder: js/helpers/calculateAge.js *my template.hbs is in js/modules/myTemplate.hbs *my webpack config inside the resolve is: fallback: path.join(__dirname, "js/helpers") -> if i log the path it is correct and i have tried various varieties. * I copied your: calculateAge.js, myTemplate.hbs, ajax code - all from github * If i remove calculateAge from the template everything works My webpack config is: var debug = process.env.NODE_ENV !== "production"; var webpack = require('webpack'); var path = require("path"); module.exports = { context: __dirname, devtool: debug ? "inline-sourcemap" : null, entry: "./js/main.js", output: { path: __dirname + "js", filename: "main.min.js" }, resolve: { fallback: path.join(__dirname, "js/helpers") }, module: { loaders: [ {test: /\.hbs$/, loader: "handlebars-loader"} ] }, plugins: debug ? [] : [ new webpack.optimize.DedupePlugin(), new webpack.optimize.OccurenceOrderPlugin(), new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }), ], };
Ok so something went wrong with the pets age at the end. The json data says that the first cat was born in 2016 and its 2020 now - which means the cat is 4 years old and thats what got returned from my calculateAge function. All of the ages came out ok for me. I dont get why the function spat out 0. And i dont believe he didnt realise that and he went and created an if statement and got the wrong ages anyway. Just pointing out what i noticed but thank you so so much. I can now GET an external API and use it in my project!! Thanks great video
Judging by this tutorial, you are a talented communicator and teacher. I hope you're still teaching. Thank you for this very helpful lesson.
Just wanted to say thank you for making all these videos. All your videos have been immensely helpful. I really like how you keep each video concise (not going over basic concepts in every video), but you still take the time to explain exactly what you are doing.
Best teacher ever!
Not annoying at all, and very clear expleaning!
Thank you!
For anyone wondering, this is still relevant, didn't get any problems while following along :)
I just don't understand why people will give a thumbs down to this video? You know Its a free tutorial! Thanks @LearnWebCode I've been following your latest 30 min series and I learned a lot (especially the JSON/AJAX video). Thank you so much!
I just want to reiterate what a few others have said. I know its easy to say but I really mean it when I say your tutorials are great. I've just been doing your Udemy course and although I knew a lot of the course, you've given me a much better understanding. Keep up the fantastic work, it really is very much appreciated.
Thank you very much for all your time and enthusiastic tutorials. Your language is so clear that I asynchronously can take advantage of learning english as well. Leting animals be part of your lessons makes you very sympathic. Bravo!
Just want to say thank you so so much for making all these videos.
really learn a lot from you! Thanks again!
this is the most succinct and logical tutorial on the subject that I have found online. Thank You!
Many thanks! Finally someone explaining things properly, condensed, to the point. Thank you sir!
i was tired of trying to learn handlebars on my own,
Thank you man !!
subscribed, & looping through videos :)
I found this to be very helpful and concise. Paced very well too.
You prolly dont give a shit but if you are bored like me atm you can stream pretty much all of the latest movies on Instaflixxer. Have been binge watching with my girlfriend lately :)
@Arturo Patrick definitely, have been using InstaFlixxer for months myself :)
A million thanks. I was in need to such an obvious video. Don't stop teaching!
Excellent teaching. I had a breezy ride with handlebars. Thanks a ton.
Really all your tutorials are incredibly clear, well builded, nice to hear/look at: probably the best tutorials in this domain, thanks
Funny, crystal-clear explainer. I love your videos, keep it up dude!
This was very good. We need more from you! Between you and Mosh Homedani, I may become competent at Javascript someday...
Thanks very much! I'm taking a coding bootcamp rn and your vid was much easier to understand.
precise, short, clear with practical example; VERY HELPFUL!
That's a super juicy video! Thanks Brad
Yeah
Yep!
sir your accent and everything is so so so helpful
Very simple and easy to understand. This video is best for beginners. Thank you
Excellent pedagogy; you made it all very clear. Thank you.
Wow,. Perfect! I followed step by step and def gained a clear understanding of how to write with hdb. Thx!
Hey Brad, I love that you included all the setup stuff in a codepen! Made following along super easy!
Awesome Explanation Bro, appreciate your noncommercial help.
Hey Brad, I find your courses to be extremely engaging and useful. Possibly one of the best I have seen around so two thumbs-up. Having said this, I have recently taken an opportunity where Ember.JS is the framework of choice for developing web apps and find it difficult to master/ understand. Is there any chance you could make a tutorial/ video/ courses on Ember from beginner to expert level? Thanks!
Great stuff Brad, that's why I bought your Udemy course, it's worth every penny!
Thank you so much for taking time to explain everything. You bet, we learned everything you said! Awesome vids!
This is grate! Thank you for your time given to us. Thank you for sharing your knowledge with us.
Andrzej Cuber Polski?
5 years later, i was thrown off by the math calculateAge, ahha LOVED this video
Even after 4 years, it is relevant. Just one question is there any modern way to do the same.
What tool you are using to drag and create rectangle at 4:43?
This is so helpful. Thankyou so much for such a great video 🙂 I've been trying to do this with help of handlebar docs and those are too confusing for the beginners.
You know you are awesome and I am definitely going to subscribe you, Usually I don't subscribe anyone..
This is what I was looking for
I watched your JSON & AJAX before this, but did you also make a video for the CSS styling that you did in between these two videos?
Great tutorial. Is it possible to make a individual page for each pet? For example when click the image or title of the pet it will go to the individual page to view more information about the pet.
Thanks a lot for the whole series of vdeos. Learned a lot
Why would I use that new complicated handlebars.js instead of just putting in an easy String that contains all the tags (like in that previous ajax/json video)?...
You would want to use handlebars if your application requires logic and has a lot of elements. Handlebars basically allows you writting plain html code for the templates without looking after all the special characters, looping, if-conditioning and so on.
Hi, Brad. I was wondering if you could make a tutorial on using Webpack with Wordpress. Thanks
Superbly explained as always but I'll be sticking to template literals, available in core js since ES6 (2015), very easy, and, in my view better than learning yet another unnecessary contrivance. I understand the pressure new developers feel to become familiar with all the available framework libraries but it's often at the expense of learning core js well (as half an hour looking at framework questions on SO shows only too well).
great video. Can you make a video to submit a form or send data by handlebars?
Great Tutorial! it is now 2021. Is Handlebars still popular or is there a better way to this?
Hey this is a great tutorial, but it needs to be updated to reflect the changes in Webpack version 2. In the configuration file the way you output your bundle is different. And reslolve no longer has fallback, now it is an array resolve.modules
How do we access id or class of the element inside the script/template of the handlebars?
Thank you... This will be useful in parsing API responses.
Thanks for the video! I only see the starter code. Can I get the final code?
Hey, thanks for this tutorial. I have some questions... Should I create one file per each helper function? Should I create one file .hbs per each template? Thanks
Love your vids dude you are for sure an incredible mentor to the young devs! @LearnWebCode I see the power of handlebars but curious why/when would I use handlebars? Some practicle/real world examples? Thanks!
Handlebars forming a rectangle
suddenly appear on the screen
and if one touches any part then
entire text typed on the screen
disappears. Why does this happen?
Dude! You got the little something! Bravo!
Hi Brad question how do I have to setup the webpack config to allow me to use partials within the handlebars files
Hi Brad. Awesome tutorials. I was just wondering - was Handlebars partly inspired by Angular/React/Vue (or perhaps vice versa)? I'm a newbie, but I'm noticing some similarities between the JS frameworks.
Thanks buddy, very simple and useful. Keep it going !!
wow i never thought js was easy, thanks man
is it possible to use handlebars to decide whether we load scriptA or scriptB in the page?
This explains everything so clearly. Thanks!
Hi Brad, following along fine with your tutorial very well explained - however when I try to use NPM and webpack for workflow in the last part of this tutorial - the terminal command "npm install handlebars handlebars-loader path --save-dev" it only generates the node_modules/ folder within my site. It does not create a package.json or a webpack.config file in the root of my site. Did you create these files manually or have I missed something? Thanks, Mark.
Oh I just made a public git repo of this tutorial you can access at github.com/matherton/handlebars101 thanks
Very clear explanation, thank you.
awesome Tutorial , you have great way to explain things
Hey there! First of all, thanks for everything you do, you truly are the man! Second of all, could you maybe give me a little hint of what I'd have to do in the following situation: What if I wanted to output a single pet in the container and then on click of a button dynamically change the content to display another pet by its name in the array of my JSON-file? Thanks!!
It was a very helpful tutorial for my web project so thank you very much.
My question now is about how to do a if helper function for to filter species. Like display it if species=cat, hide if species=dog... that would be very great for me...
Can we use handlebars.js to separate our Header and Footer and include them in all our html pages?
I got this error
WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
- configuration.resolve has an unknown property 'fallback'. These properties are valid:
object { alias?, aliasFields?, cachePredicate?, cacheWithContext?, descriptionFiles?, enforceExtension?, enforceModuleExtension?, extensions?, fileSystem?, mainFields?, mainFiles?, moduleExtensions?, modules?, plugins?, resolver?, symlinks?, unsafeCache?, useSyncFileSystemCalls? }
Can you tell me which is the alternative for fallback?
webpack integration at the end makes this tutorial onair -- Thanks .
But i have a question ?
For large e-commerce business web application can i use this kind of templating structure and is it's performance will be ok ??
so awesome !!!.. subscribed. cant wait your next tutorials
What are you using to edit your HTML and JS files?
Hi Brad, I can't figure this error out: "hb.js:21 Uncaught ReferenceError: Handlebars is not defined". I'm stuck at the first Handlebars test 11:27 into the video.
I have tried quite a few things, even pasting in your sample code to replace my typed version. I have tried both the Handlebars.runtime and non runtime packages. I have moved the script tag around in the html doc. This error persists. What can you suggest?
The error is referring to this line:
var compiledTemplate = Handlebars.compile(rawTemplate);
Here is my codepen if you have time to debug: codepen.io/kjvisual/pen/JbpgJE
Hi Ken, try using the non-runtime package (since we're compiling the templates on-the-fly in our simple example). After that, make sure you are able to select the empty "pets-container" div - looks like that element has a class in your HTML but we're referencing an ID in our JS. Also, add a closing } after the body of your final function - I made those few changes and your CodePen code worked for me.
Also, if you want to test directly in CodePen (instead of copy/pasting to local files) you can remove the reference to the handlebars package in your CodePen HTML, and in the CodePen JS tab, if you click the gear/settings icon, towards the bottom of the pop-up screen there's a "Quick-add" menu and you can choose Handlebars. Makes testing right in CodePen pretty nice!
Awesome! You are super supportive! Thank you it works!!! I will try your tip and practice/test in CodePen. I hope my ability to spot details in the code improve. Guess I need to practice, practice, practice.
What does bundle.js? Is it like a js file with all the modules combined in that?
Awesome intro to handlebars :) Thank you very much
do you have handlebars.js using google spreadsheet tutorial instead of json?
dude!thanks a ton!!!...i was so new to handlebar js.....you made it so easy for me....:))))
Hey! Love your work. In this video I am not being able to see the element, i.e. in this case the names of pets, even though I have followed each and every step thoroughly. Please help?
is this ending of course or there are other videos ???..sorry for my bad english
WOW, single quotes and double quotes matter in handle bar templates?
thoroughly enjoyed this video. Thanks !!!
This i s a great, explicit, clear and therefore very helpful tutorial.
Great tutorial, I've a problem, the webpack 4 doesn't work with fallback in webpack.config, {{$calculateAge birthday}}, can't make this work
Thanks
Does it renders the html serverside?
I am getting this error while using webpack way
message: "Missing helper: "$calculateAge""
in console.
Can anyone do help me in this!!
what if the registerHelper function name has the same name as the property of the object of the JSON file.What will happen?
try it and see what happens, you learn a lot from trying to break things like that.
(It will run as normal, I tried)
Simple ans easy to follow, thx for a another tut.
I can ride my bike with no handle bars. No handle bars. Nooo handle bars.
What if there is no name of Json array in my JSON data?
use the {{this}} method he mentioned.
THIS IS AWESOME!!!!! THANK YOU FOR LIFE!
thank you so much, your tutorials are awesome. I just wanna a know that where i can learn about that wepack and npm way of doing things.
No problem! I'd recommend first searching for "Node.js & NPM" tutorials. Once you're familiar with how to install packages, at that point you can look for "Webpack" tutorials. There are lots of free tutorials out there, but my premium course (link in description) is designed to teach all the different technologies in one central place, so you can see how they come together in a real-world example project.
LearnWebCode Thank you for your reply. I was going to ask about your course as i am interested in it but just want to ask something, i have some knowledge about php and have built one ecommerce website, in your course you will going to use node.js right? and i have also heard alot about node.js , so should i move towards node.js or should i stay with php and start polishing it by learning more about it like it's frameworks laravel and all.
I am going to take your course so can i code the backend part in php and be still in the race or should i move to node.js.
Thank you.
My current course is all front-end, so it's really more of just an introduction to what Node is and what it can be used for - but in the end we only use it for front-end workflow automation tasks (to save time and let our code stay super organized). If you're interested in learning about backend Node my current course won't help much. There's another channel on TH-cam named "Mindspace" and he has great tutorials on Node (check out his Node Shopping Cart series). I have plans to create a backend Node course in the future, but need to finish a few WordPress projects first :)
Either PHP or Node will work well. If someone was learning from scratch I'd probably recommend Node, but if you already have a decent PHP foundation I think sticking with it is a good idea. It may not be the #1 trending language like JS but there are still TONS of jobs / projects that call for PHP.
For those who are using webpack version 2, use this code below otherwise you'll run into the these 2 errors :)
- configuration.output.path: The provided value "./js" is not an absolute path!
- configuration.resolve has an unknown property 'fallback'.
var path = require("path");
module.exports = {
entry: "./js/main.js",
output: {
path: path.resolve(__dirname, "./js"),
filename: "main-bundled.js"
},
resolve: {
modules: [
path.join(__dirname, "./js/helpers")
]
},
module: {
loaders: [
{test: /\.hbs$/, loader: "handlebars-loader"}
]
}
};
can you create a tutorial for angular 2
Thanks for this video! Im a little stuck though... I have everything working except for the resolve.fallback, the log spits "Helper Missing".
*my helper is in folder: js/helpers/calculateAge.js
*my template.hbs is in js/modules/myTemplate.hbs
*my webpack config inside the resolve is: fallback: path.join(__dirname, "js/helpers")
-> if i log the path it is correct and i have tried various varieties.
* I copied your: calculateAge.js, myTemplate.hbs, ajax code - all from github
* If i remove calculateAge from the template everything works
My webpack config is:
var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');
var path = require("path");
module.exports = {
context: __dirname,
devtool: debug ? "inline-sourcemap" : null,
entry: "./js/main.js",
output: {
path: __dirname + "js",
filename: "main.min.js"
},
resolve: {
fallback: path.join(__dirname, "js/helpers")
},
module: {
loaders: [
{test: /\.hbs$/, loader: "handlebars-loader"}
]
},
plugins: debug ? [] : [
new webpack.optimize.DedupePlugin(),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
],
};
Thanks for teaching me Handlebars and Json :D
Excellent. Thank you so much!
which font are you using. can you share? thanks
I believe I was using "Monaco" in my text editor here.
Really helpful tutorial. Thanks!
Purrsloud is now 1 year old.
Purrsloud is now 2 years old
Very useful, very clear, thanks a lot.
Very happy to subscribed your channel, maintain the same quality bro.
Ok so something went wrong with the pets age at the end. The json data says that the first cat was born in 2016 and its 2020 now - which means the cat is 4 years old and thats what got returned from my calculateAge function. All of the ages came out ok for me. I dont get why the function spat out 0. And i dont believe he didnt realise that and he went and created an if statement and got the wrong ages anyway. Just pointing out what i noticed but thank you so so much. I can now GET an external API and use it in my project!! Thanks great video
Great tutorial, thanks!
The video is great. I did learn something
Good stuff. Thanks mate.