Advanced Blog Page with Bootstrap 5 & Material Design 2.0

00:00 hey guys it's david from mdbootstrap.com 00:02 welcome to 00:03 another tutorial from our mdb5 series 00:07 and today we have a part two of our blog 00:10 tutorial so this is what we have created 00:12 in the last tutorial in the part one 00:15 so if you haven't seen it please check 00:17 the link 00:18 in the description down below or if you 00:21 don't want to create this from scratch 00:23 you can just go to our repository and 00:26 download or clone this repository and to 00:29 your local machine 00:30 and that's how you're gonna get this 00:32 starting point 00:33 uh if you didn't want to recreate it 00:36 from a scratch 00:37 so this is gonna be our starting point 00:38 and what we're gonna do in this tutorial 00:40 we're gonna add some two cool features 00:44 the first one is lazy loading so 00:47 this this amazing feature allows us to 00:50 save some bandwidth 00:51 so just have a look i'm going to refresh 00:53 the page and check these images over 00:56 here 00:57 so as you can see these images are 01:00 loaded 01:01 when they become visible 01:04 on the screen so let me do it one more 01:07 time and i'm going to open 01:09 inspector right now let's go to network 01:12 tab so you're gonna see that 01:13 in the image tab we 01:17 have now only these 01:20 images and now when i when i start 01:23 scrolling 01:25 we will see more images coming 01:29 like here this 31 32 01:33 uh let's do it again so i'm gonna 01:35 refresh the one which are visible so 01:37 the one below are visible for a second 01:40 because the 01:41 top ones are loading um so they're 01:44 already 01:44 being loaded as well but if we scroll 01:47 down you're gonna see the third row 01:49 isn't loaded and when i scroll down 01:51 you're gonna see 01:52 two more images over here 01:56 uh watch out right now see so these two 01:59 images were 02:00 were loaded on scroll which obviously is 02:03 a good way because 02:04 if you have a long page with a lot of 02:07 content 02:08 you don't need to uh or actually our 02:10 browser doesn't 02:11 have to load all images at once 02:14 uh because we don't see them anyway 02:16 right so the user might enter your page 02:18 and see just a few very few 02:21 pictures and then he might navigate to 02:23 this blog post so he's not going to see 02:26 pictures down below so there is no point 02:28 in loading them 02:29 and downloading another feature is 02:32 so called infinite scroll so this is 02:34 something which you already know from 02:36 um pages from platforms like facebook 02:40 so have a look at this we have a six 02:43 articles over here one two three 02:45 four five six and now the this page is 02:48 about 02:49 to over it's almost done 02:52 but when we scroll to the bottom we're 02:55 gonna have two 02:57 new articles unloaded and this is 02:59 happening 03:00 continuously when we scroll 03:03 down so this is infinite scroll so i'm 03:06 going to show you how to provide the fit 03:08 to our scroll 03:09 so that's that way you can have 03:12 an infinite page so if you have some 03:15 applications which 03:17 can load more and more data on scroll so 03:19 this is a perfect solution 03:21 for that so um without further ado 03:24 let's get started let me just remind you 03:27 that this part 03:28 uh we'll be using will be utilizing mdb 03:30 pro 03:31 so in order to start that we will have 03:34 to 03:35 uh get mdb pro to our computer and we're 03:37 going to update our project so this one 03:39 was built on mdb 03:40 uh which is mit license which is mit 03:43 license open source so we can use it 03:46 for free and for this one we'll have to 03:48 get mdb pro so if you already have that 03:51 uh just navigate to your orders and 03:54 download 03:55 this kit if you don't have it you can 03:56 always uh go 03:58 and buy it and once you do that 04:02 uh once you download this this package 04:04 once you download the starting 04:06 point over here or you already have that 04:09 because you 04:10 followed my previous tutorial then you 04:12 just need to go to 04:14 to package and copy and replace 04:17 css and js files and that way 04:21 our project has already mdb 04:24 pro and now we are ready to start 04:28 developing our patch let me get this one 04:30 to the right side because this is the 04:31 file which we're gonna be working on and 04:34 let's open 04:35 this in visual studio code 04:39 okay so we gonna start 04:42 with lazy loading so in order to learn 04:46 how to use lazy loading 04:48 let's go to md bootstrap.com patch or 04:50 you're gonna find all the 04:51 documentation let's navigate to 04:54 bootstrap 5 04:55 mdb5 so this is the version 04:59 and let's search for lazy loading 05:02 component 05:03 so here we have an api and all the 05:05 examples you can see 05:08 so if you're going to scroll down you're 05:10 going to see 05:11 these examples so as you can see we can 05:14 use it 05:15 both for images as well as videos 05:19 so we're going to use 05:23 a basic example because this is 05:27 it's very very easy to use it as you can 05:29 see what we have to do 05:31 we just need to do two things so uh 05:35 we have to add two parameters and two 05:37 attributes 05:38 we have to add two attributes so the 05:41 first one is actually replacing our 05:43 source so our image doesn't use the 05:45 source anymore 05:46 now it's called data lazy source so this 05:49 is the actual 05:51 address of our image then we have data 05:54 lazy placeholder so this is something 05:56 which we want to 05:57 show before loading the actual image so 06:00 this is this kind of placeholder 06:01 and finally what we have to do is just 06:03 to add lazy 06:05 class so let's let's let's do it now so 06:07 i'm gonna copy this part 06:09 and what i'm gonna do i'm gonna go 06:13 to our images 06:17 and i'm gonna replace this 06:20 part with 06:24 this part so we are changing our 06:28 attribute we already have the url we 06:30 just want to change this 06:31 so i'm gonna all the images and ones and 06:35 just 06:36 replace it so now we have this 06:39 attribute source being replaced with 06:41 data lazy source 06:43 now let me copy this data lazy 06:47 placeholder 06:49 and paste it and now let's also add 06:53 this class 06:59 let's add lazy class and let's 07:02 check the result 07:05 so as you can see now after refresh we 07:07 already see that our images 07:09 are being loaded once we 07:13 scroll so as you could see this was very 07:16 easy 07:16 and to use um i hope you're gonna enjoy 07:19 that because it's very powerful tool 07:21 so now let's move to the infinite scroll 07:23 so before we start working on the fin 07:25 scroll what we're gonna do we're gonna 07:27 obviously remove the pagination because 07:29 it's not needed 07:30 anymore we have infinite scroll right 07:32 and we're gonna also get rid of footer 07:34 because 07:35 you don't use that when you use infinite 07:37 scroll 07:38 so let's get back to our code and let's 07:41 get rid of pagination 07:44 right and let's get rid of our footer 07:50 so this is gone now let's navigate 07:54 to documentation let's go to infinite 07:57 scroll 07:58 so then again you have um examples over 08:01 here which shows you different options 08:03 and we're gonna use a last example 08:06 window and the reason behind it is 08:08 because 08:09 now we want to attach and we want to 08:12 attach 08:12 um our new elements into 08:16 this uh window uh this element 08:19 post and so i'm gonna show you let me 08:22 let me just copy paste this one and i'm 08:23 gonna quickly explain and go through 08:27 all the code one by one so i'm going to 08:29 copy javascript part 08:32 and i'm going to paste it in our 08:34 javascript 08:36 we are also we also need 08:40 a placeholder uh so here it is this is 08:44 um 08:44 spinner so the spinner is let me show 08:48 you here 08:49 so when we so this is this spinner which 08:52 is shown here this animation 08:54 which suggests user that content is 08:57 being loaded so we're gonna 08:58 add this spinner 09:02 in at the bottom of our page 09:06 so let's do it 09:11 okay so we've added this one and now 09:13 let's go through 09:15 a code of our application 09:18 so so here we have some variable to 09:22 get to the elements uh like post so this 09:24 is our container right so this is the 09:26 one which 09:27 we where we're going to add where we'll 09:29 be adding new post 09:31 on load and spinner obviously this 09:34 is uh this is linked to this spinner so 09:37 it will be 09:37 as you can see it has a style display 09:40 known 09:40 and it will be changing once we start 09:42 uploading 09:43 then what we have is an array with um a 09:47 few attributes so we have objects with 09:49 uh 09:50 attributes like image title text 09:51 obviously you can adjust it 09:53 um so you can create an array of 09:56 different objects right we have image 09:58 little uh 09:59 we have image title and text uh but you 10:02 could have like more right you could 10:03 have like heading subheading 10:05 um images more images whatsoever some 10:08 icons 10:09 so these are variables and you can 10:10 create as many as you wish 10:14 and then we have post templates so this 10:16 is the html which is gonna 10:18 be added so every single post 10:21 every new uh every new 10:24 article has this html structure so you 10:29 can obviously 10:29 change it adjust it as you wish 10:32 and then you can see that we are using 10:35 our 10:36 variables from here over there 10:40 and they are being dynamically and 10:43 they're 10:43 getting dynamically updated 10:46 inserted into our template and this 10:48 entire template 10:50 including our values is being injected 10:53 into our html using javascript 10:55 okay now 10:58 then we have a piece of javascript uh 11:02 we're not gonna go into 11:04 much into details uh but 11:07 just for understanding what's happening 11:09 here is we are 11:10 creating a row with 11:14 div with a class row because obviously 11:16 every time we are adding 11:18 two new posts we want to have them in a 11:22 new 11:22 row so they would collapse correctly and 11:25 according to 11:26 uh to the bootstrap guidelines and then 11:28 finally 11:30 here we can define how many 11:34 elements we have we want to have within 11:38 within a single row because we might 11:40 want to have 11:41 more elements with a single row 11:44 in our case we will be obviously adding 11:47 two 11:47 elements two columns for each row and 11:50 finally there is some initialization 11:52 so let's see how it works now let's 11:55 refresh the page 11:56 so lazy loading works as it's supposed 11:59 to and now 12:00 we will see the spinner over here and 12:03 this is 12:04 adding new elements 12:07 on scroll okay so 12:10 i hope that was easy as you can see 12:15 mdb makes it very very easy to use this 12:17 advanced script 12:19 obviously i encourage you 12:22 to play with it play with different 12:25 options you can have 12:26 uh you can you can use different 12:28 directions uh you can use different 12:30 options 12:32 and also i strongly encourage you to 12:34 check 12:35 other components other 12:38 methods and so on because mdb really 12:41 comes 12:42 with a plenty of awesome components as 12:45 well as utilities and and many many more 12:48 thank you very much for watching if you 12:50 enjoyed this video please 12:52 don't forget to give us a like don't 12:53 forget to subscribe to our channel 12:55 because we are creating 12:56 a lot of content like that so we're 12:58 gonna have more tutorials we 13:00 also had uh previous tutorials on how to 13:03 build a landing page 13:04 uh how to build a portfolio page so 13:07 just check our channel mdbootstrap 13:10 channel you're gonna find 13:12 a lot of videos over there you're gonna 13:13 find a bootstrap file tutorial 13:15 and once you create your page uh also 13:18 don't 13:20 forget to join our group you're going to 13:22 find the link 13:24 in the description down below and don't 13:26 forget to share 13:28 your projects over there thank you for 13:31 watching again and 13:32 see you in the next video