I owe UA-cam algorithm a lot for suggesting this video, I love your personality, your content...Everything about your videos in general. I just subscribed and I'm gonna binge watch your videos after that. Thank you
Seriously... Your videos teach us so much, so fast. It keeps me out of trouble at school and I'm also ahead of the other students. I also recommended you to my teacher. Thanks Brother
*EDIT* Nevermind! Had an issue in the beginning that you literally resolved as soon as I hit Play. Love the videos! Very helpful to a new dev like myself. Thanks for being awesome!
This is AMAZIIIIIING ! 2 days ago I said, my workflow right now is decent, I like this :), and the I watched this video and said WHAT !!! I'm on another level Now ! Thank you brother !
better yet, use pnpm (same as npm but with the added benefit of much faster working + much less storage space used. pnpm / pnpmx. First install it by npm install -g pnpm then go!)
Can this be used without a front end stack? So new to js and want to use it, but I'm not comfortable with all that stuff. Would like to eventually use on WordPress but just a static site for now would be good.barba js vs docs suck and I've seen no content on UA-cam for it. Your thoughts, pullleaze !! Thanks !
i've searched for this about 2years ago and couldn't got any answer but now you show the way... thank you 😭😭😭😭😭👍👍👍 i'm so mucg beginner that i'm not familiar with using Terminal&node js ..however i'm gonna try this!! Thank you!!!♥♥
You are incredible. You're the first channel I've turned on Notifications so I make sure I don't miss anything. Thank you so much for being amazing and making these tutorials for us all!
I like your positive attitude(is that what it's called?). The brightness of your aura empowered me. You made me feel like a loser. Before improving my knowledge, I have to improve as a person to get accepted, I guess... force a smile...force a smile....I can do it
after downloading Node.js, I was having a hard time having the terminal recognize the node program. Then, I looked at how DevEd wrote the name "node -v" and you need the space before you type the hyphen! "node-v" will not register correctly in the terminal. You must type "node -v". Thank you again DevEd! Love your informational videos, your bright personality, and your "gorgeous" intro! lol!
damn dude I love your attitude 😂 Ur really so friendly not a boring teacher at all in every intro i can't resist pausing da video (or sometimes leave it running lol) and go smash dat like thumb 👍♥️😂
Hi there! Thanks for this amazing practical tutorial bro! Your enthusiasm made it sound like everything is easy with the way you explain almost every line of code and giving the reasons why you're writing them and the effect they give to the pages. Makes them easier to remember. Now I'm a lot more inspired to pursue this. Keep it up!
and here i thought i would just get to see tranaitions between sections inside one static html page. this is a great video, learned a lot. subscribed, nuff said.
Thank you for the content! I swear - if you did a limited class size of a 2x a week or so live coding seminar where we can do Q&A with the live comments and have some individual time like 10mins a week consulting to individually gear us towards our personal coding goals I'd sign up. I did this with a ForEx (foregin exchange) and Technical Analysis Stock trading class & it was one of the best experiences. I felt like I engaged with a community of like minded people and learned better because it was a great environment for newbies.
High level explanation of what I gathered from literally skimming through the video for about 10 seconds. Put pages in containers, give pages an enter animation that calls a function when that animation is done. Create a router to load new pages in above the current page and listens for done callback. When the callback is received the router can drop the old page. Looks like you're using a framework called highway to do this but I think that's the basic concept.
thanks for making this video, you did a great job balancing web designer thoughts real time with HTML,CSS as well as the main topic of the video. learned a ton from it. great personality. subscribed please make more!
its been one year u released the last video on page transitions bro, so i came here to give you the holly grail of non existent content on the entire web to create an awesome tutorial that i know u can :) imagine barba js page transitions with lottie animations been controled by GSAP ;)
Great Video, I am falling behind. Also for anyone that has an error saying TimelineLight is not a constructor :) make sure you spell it correctly "TimelineLite" not TimelineLight. Took me a few minutes to figure out what I did wrong.
@Dev Ed overall I can give you tip with parcel if you'll write for example ``` import _ from 'lodash' ``` in your js file then you don't need to install it "via npm" because after "hot reload" parcel is doing his part and it's downloading this dependency
i dont regret subscribing your channel...your have a good n happy vibe...keep going...we are here to support you😊...n bdw i wanted to do that pagination too...but didnt work out well🤣
in the terminal i got n error even if i downloaded node.js but after sometime and really concentrating on your video, i found out that i nee to out a space after node and a dash and v then it worked . Thank you very much it helped me in my portfolio
Install "tools" (like parcel) locally with --save-dev flag. So that anyone who clone your repo could reproduce your whole sheebang by simply typing 'npm install'
One more thing i like about your videos is the intro! when i see it, i think great another intro section, get ready to press right arrow arrow arrow arrow.. .. , .. oh its finished!
I somehow love how a transition effect spirals into an introduction of node, npm, parcel and ES6 import 😂 some would say it makes for a bad tutorial I think it makes it perfect since you are not left with oh here is something just accept that it's there.
What issues in prod should we look at for parcel? Can parcel be used in prod? Does Ed read old comments? This is 9 months old but still seems relevant.
This is a great video - just to note though you shouldn't animate the CSS values 'top' and 'left' if you want 60fps smoothness. You should animate the associated 'transform' properties instead. Also...using a library like this would be absolutely terrible for SEO, so I wouldn't recommend using it on a site where SEO is needed/required.
Because when you navigate between the pages the SEO info for those pages isn't tracked by the Googlebot because you're not actually leaving the page and going to a different one. For instance no info from the 'head' section which carries important SEO info such as page titles will be registered and it'll only ever register a visitor landing on the home page. A big no-no for small/local businesses.
@Jhon Doe The google bot will index the different pages yes, but it won't register you arriving on a new page from the old one, because you don't actually leave the homepage. Your site will show no visits to other pages unless a user lands on a different page when first visiting your site. This is bad for SEO.
Hi Ed, I really like your videos! Good job! I have some questions for you - does it makes any sense to use HighwayJS or BarbaJS with React? Or React already does these DOM manipulations?
do post such type of amazing tutorials ;) and if possible post node js tutorials . PS : i would like to thank UA-cam for showing your video in recommended videos :D
I believe this can be done with few lines of pure CSS and a couple of JS lines... or am I wrong? I don't know what's the benefit of using 2 external libraries and tgat much hassle for that. Video is good, first time I see this channel so I don't know who your target audience is, I did learn that there is something called Parcel though, so thank you. One thing though, you should probably use transform:scale or transform:translate instead of height or width, as it will seem like it gets unsquashed including all it's children, this way is fine too but maybe set overflow:hidden so the text doesn't appear outside as well.. I know this may be for beginners but felt like you should have included that. Btw, I hate listeningto people talk for long, yet I managed to kind of listen to you for almost the whole video.. you might have something nice going there, keep it up!
Thank you so much and I am happy you managed to watch almost the whole video haha. To answer the few questions: 1. Animating height/width was a mistake on my part (total brain fart, it is a bad idea). 2.This can be done with only css and js however there is a big diference. With css you would probably only be able to move the sections around (but the end of the day, you are still rendering both sections). What the library does is, it literally fetches the other page only when you click the about section (that is when it goes out to fetch the page).The example I used tough was super simple so it probably isn't worth to add the library. But if you have an index.html that is pretty loaded then it would work quite well. Thanks again!
up to this moment I thought npm and composer stuff was to be run on the server using Shell e_e I'm a self-taught, and used Notepad++ for all my projects, I'm installing Visual Studio Code as I type this now lmao. Thanks!
Dude no matter what you're describing, your personality is amazing man. I love it. keep moving
Positivity radiates from Ed and you can tell he's genuinely having fun!
yeah i agree - good energy from this dude, keep it rolling man
His personality is what more get me into this than content 😂 😂
its really pleasant to see a compatriot :) hello mate!
yeah he is funny
I owe UA-cam algorithm a lot for suggesting this video, I love your personality, your content...Everything about your videos in general. I just subscribed and I'm gonna binge watch your videos after that. Thank you
Thank you so much my friend! Yeah for some reason youtube is really pushing my videos, so I am really happy about that!
You are the most likeable instructure on UA-cam. Thanks for being a real human than acting like a machine.... Awesome tuts.. Thanks
I can’t stress how long I’ve been looking for this page transition. And ur joyful personality makes this Chanel fun to learn and watch.
You had me at "Deep in the north, beyond the wall".
Dude that's what I was gonna comment ♥️
I LOVE YOU MAN!! !I SPENT DAYSSS FINDING A FREAKIN SIMPLE ROUTER!!! OMGGGG FINALYY I LOVE YOU!! !ILL SUPPORT YOU!! I WISH YOU THE BEST!!!!!
Seriously...
Your videos teach us so much, so fast.
It keeps me out of trouble at school and I'm also ahead of the other students.
I also recommended you to my teacher.
Thanks Brother
your vibe is just amazing! :)) not the usual tutorials for sure.
*EDIT* Nevermind! Had an issue in the beginning that you literally resolved as soon as I hit Play.
Love the videos! Very helpful to a new dev like myself.
Thanks for being awesome!
We are loving this content. Please keep making this kind of full projects🖤🖤🖤
This is AMAZIIIIIING ! 2 days ago I said, my workflow right now is decent, I like this :), and the I watched this video and said WHAT !!! I'm on another level Now ! Thank you brother !
Use: npm init -y
Instead of pressing enter 60 times
uuu great tip! Thanks!
@@developedbyed You're welcom. And i really like your tutorials by the way , big up ❤
better yet, use pnpm (same as npm but with the added benefit of much faster working + much less storage space used. pnpm / pnpmx. First install it by npm install -g pnpm then go!)
@@pengekcs complicated
Can this be used without a front end stack? So new to js and want to use it, but I'm not comfortable with all that stuff. Would like to eventually use on WordPress but just a static site for now would be good.barba js vs docs suck and I've seen no content on UA-cam for it. Your thoughts, pullleaze !! Thanks !
Thabks for taking the time to make this! Your pace is good and you really know how to entertain.
Oh man I'm so happy to find your channel it's just open my eyes to keep working on my self and learn new skills thanks man:)
Just found this channel. Awesome!
And Dogstudio site is absolutely mind blowing
I came for the tuts, stayed because your vibe. Thanks!
Hey Ed, great stuff bro. Much appreciation from Kenya 😀
i've searched for this about 2years ago and couldn't got any answer but now you show the way... thank you 😭😭😭😭😭👍👍👍 i'm so mucg beginner that i'm not familiar with using Terminal&node js ..however i'm gonna try this!! Thank you!!!♥♥
You are incredible. You're the first channel I've turned on Notifications so I make sure I don't miss anything. Thank you so much for being amazing and making these tutorials for us all!
I love you man, very helpful Tutorial. Your intros get me all the time
I am happy you are growing on UA-cam keep it up your videos are very helpful !!!
I like your positive attitude(is that what it's called?). The brightness of your aura empowered me. You made me feel like a loser.
Before improving my knowledge, I have to improve as a person to get accepted, I guess...
force a smile...force a smile....I can do it
Searched a lot of videos on page transitions and finally got an amazing one😊
Great tutorial. There were few things here and there that I had to google (like depreciated gsap methods) but it worked out great. Thanks Ed!
I love the way you break down every steps by explain.
after downloading Node.js, I was having a hard time having the terminal recognize the node program. Then, I looked at how DevEd wrote the name "node -v" and you need the space before you type the hyphen! "node-v" will not register correctly in the terminal. You must type "node -v". Thank you again DevEd! Love your informational videos, your bright personality, and your "gorgeous" intro! lol!
damn dude I love your attitude 😂 Ur really so friendly not a boring teacher at all in every intro i can't resist pausing da video (or sometimes leave it running lol) and go smash dat like thumb 👍♥️😂
before check this tutorial i want to thanks u bcz u done so much hardwork to learnt this . thanks .
Hi there! Thanks for this amazing practical tutorial bro! Your enthusiasm made it sound like everything is easy with the way you explain almost every line of code and giving the reasons why you're writing them and the effect they give to the pages. Makes them easier to remember. Now I'm a lot more inspired to pursue this. Keep it up!
This is so beautiful :( this channel deserves all subs!
Man, where have you been? I love your content and all tutorials. Nice work. Subscribing...
Haha thank you!
the way you initiate the video is beyond awesome! keep posting! lots of love from a female developer from india..!
and here i thought i would just get to see tranaitions between sections inside one static html page.
this is a great video, learned a lot.
subscribed, nuff said.
This video is exactly what I was looking for, and it's explained very well. Thanks!
Hey man, this channel is fantastic. I'm learning a lot and you give off a really good vibe.
Doesn't matter html javascript or anything. Your good energy enough for us
For some reason I love the way you teach
Thank you for the content! I swear - if you did a limited class size of a 2x a week or so live coding seminar where we can do Q&A with the live comments and have some individual time like 10mins a week consulting to individually gear us towards our personal coding goals I'd sign up. I did this with a ForEx (foregin exchange) and Technical Analysis Stock trading class & it was one of the best experiences. I felt like I engaged with a community of like minded people and learned better because it was a great environment for newbies.
U bro.. I don't have words to describe you.. you just make me smile everytime u start the video..
I think i'm in love with this man. Amazing channel, loving all videos. 😀
High level explanation of what I gathered from literally skimming through the video for about 10 seconds.
Put pages in containers, give pages an enter animation that calls a function when that animation is done. Create a router to load new pages in above the current page and listens for done callback. When the callback is received the router can drop the old page.
Looks like you're using a framework called highway to do this but I think that's the basic concept.
thanks for making this video, you did a great job balancing web designer thoughts real time with HTML,CSS as well as the main topic of the video. learned a ton from it. great personality. subscribed please make more!
you are so lively , please keep posting such awesome tutorial
Great content, man! Keep up with the good work you've been making. Cheers from Brazil 🙂
I've just met you (that's my first video) and you got a new subscriber! Wonderful job. Keep going!
Same, i thought if he makes vids like this he would have 100k plus, but no m8
Man the way you make content is awesome, greetings from Argentina
Heyyy the way you teach is so amazing. Love your videos! Thaankss a ton for the great content :D
This is called a real informative tutorial. Thanks, man!
"we're almost at 5 thousand subscribers" wtf man 2019 may be a year and half back but goddamn what a growth from 5k to 455k (as of oct 2020)
Now 466k as of 1 November 2020 :O
503k, 1 December 2020 :0
508k dec6 2020
You deserve waay more subscribers man
This comment makes me feel happy! Thanks so much
@@developedbyed whenever i make changes in the sass file, it doent show up what do i do plss tell
@@developedbyed i beg u
T_T
You really enjoy what you do, and you show it in your videos :) Subscribed
its been one year u released the last video on page transitions bro, so i came here to give you the holly grail of non existent content on the entire web to create an awesome tutorial that i know u can :) imagine barba js page transitions with lottie animations been controled by GSAP ;)
Thank you for these awesome videos! I love the personality, enjoyment, and knowledge you bring!
You're the best Front End Dev Ever
Great Video, I am falling behind. Also for anyone that has an error saying TimelineLight is not a constructor :) make sure you spell it correctly "TimelineLite" not TimelineLight. Took me a few minutes to figure out what I did wrong.
5 seconds after the video, omg I dont mind I have to listen for a while to learn , what a cool guy you are, greetings from colombia
Dev Ed This is all your enthusiasm that shows how extremely you work hard for us😍
@Dev Ed
overall I can give you tip with parcel
if you'll write for example
```
import _ from 'lodash'
```
in your js file then you don't need to install it "via npm" because after "hot reload" parcel is doing his part and it's downloading this dependency
I'm going to learn so much from this channel. Thank you 😊🙏🏼
i dont regret subscribing your channel...your have a good n happy vibe...keep going...we are here to support you😊...n bdw i wanted to do that pagination too...but didnt work out well🤣
in the terminal i got n error even if i downloaded node.js
but after sometime and really concentrating on your video,
i found out that i nee to out a space after node and a dash and v then it worked .
Thank you very much it helped me in my portfolio
This channel is priceless. you sir, are a great teacher.
I absolutely love your sense of humor. Data router wrapper🌚. I find your videos very informative and fun. Gracias. Question...Can I do this in react?
Awesome tutorial! Doesn't help much my crisis on wanting to go for full front-end development - it's so much fun >.
Dude you are just an amazing instructor 👩🏫
Install "tools" (like parcel) locally with --save-dev flag. So that anyone who clone your repo could reproduce your whole sheebang by simply typing 'npm install'
One more thing i like about your videos is the intro! when i see it, i think great another intro section, get ready to press right arrow arrow arrow arrow.. .. , .. oh its finished!
It's unbelievable!!! Thx for content
Guys, dont just look the Video, Subscribe to him, he deserves it
this is awesome man. i love your design
I somehow love how a transition effect spirals into an introduction of node, npm, parcel and ES6 import 😂 some would say it makes for a bad tutorial I think it makes it perfect since you are not left with oh here is something just accept that it's there.
thank you so much for such an amazing sooth page transitions plz keep up the good work.
Your work here is amazing :’) so positive, pretty and bright
This is amazing! Can you please do a tutorial on page transition using react-router pleaseeee
You made my day men I learned too many things today ❤❤
This video helped me a loooottt!! Thank you so much. Your videos are amazing 🤩
33:24 WOW almost at 5 thousand subscribers 😮😮
this is what I've been looking for, thanks
Incredible!!! Thanks for share this great tutorial
We are proud of you!
wow.......... i strongly wish u know u're the BEST of its kind in web sturfs.... more GRACE
Love You both. (You and Your Content). Consider Complete React Course
What issues in prod should we look at for parcel?
Can parcel be used in prod?
Does Ed read old comments?
This is 9 months old but still seems relevant.
This is a great video - just to note though you shouldn't animate the CSS values 'top' and 'left' if you want 60fps smoothness. You should animate the associated 'transform' properties instead.
Also...using a library like this would be absolutely terrible for SEO, so I wouldn't recommend using it on a site where SEO is needed/required.
Because when you navigate between the pages the SEO info for those pages isn't tracked by the Googlebot because you're not actually leaving the page and going to a different one. For instance no info from the 'head' section which carries important SEO info such as page titles will be registered and it'll only ever register a visitor landing on the home page. A big no-no for small/local businesses.
@Jhon Doe The google bot will index the different pages yes, but it won't register you arriving on a new page from the old one, because you don't actually leave the homepage. Your site will show no visits to other pages unless a user lands on a different page when first visiting your site. This is bad for SEO.
Awesome video! From 5k subs to 22k subs in just 15 days. Way to go man!
P.S. What theme are you using in Visual Studio Code?
Your just funny and exciting in your own way. I love you're personality and that's why I subscribed to your channel.
Hi Ed,
I really like your videos! Good job!
I have some questions for you - does it makes any sense to use HighwayJS or BarbaJS with React? Or React already does these DOM manipulations?
please keep making videos.... i am learning so much from them
Thank you so much it helped me a super lot in my portfolio
Greetings from Brazil!!! Your're amazing! Keep up the good work!
Thank you very much for your tutorial. A lot of fun to follow you !!
do post such type of amazing tutorials ;) and if possible post node js tutorials . PS : i would like to thank UA-cam for showing your video in recommended videos :D
this is a real complet program fron 0. tks a lot @DevEd
Hi! Dev Ed this is awesome animation Your way of explanation was so clear.
Bhai tutorial smjh nhi aya 😓
Love the setup brief.👍
Great Video Mate !! Can you please mention the VSC Theme you are using ?
that intro was the smoothest thing 👌👌
I believe this can be done with few lines of pure CSS and a couple of JS lines... or am I wrong?
I don't know what's the benefit of using 2 external libraries and tgat much hassle for that.
Video is good, first time I see this channel so I don't know who your target audience is, I did learn that there is something called Parcel though, so thank you.
One thing though, you should probably use transform:scale or transform:translate instead of height or width, as it will seem like it gets unsquashed including all it's children, this way is fine too but maybe set overflow:hidden so the text doesn't appear outside as well.. I know this may be for beginners but felt like you should have included that.
Btw, I hate listeningto people talk for long, yet I managed to kind of listen to you for almost the whole video.. you might have something nice going there, keep it up!
Thank you so much and I am happy you managed to watch almost the whole video haha.
To answer the few questions:
1. Animating height/width was a mistake on my part (total brain fart, it is a bad idea).
2.This can be done with only css and js however there is a big diference. With css you would probably only be able to move the sections around (but the end of the day, you are still rendering both sections). What the library does is, it literally fetches the other page only when you click the about section (that is when it goes out to fetch the page).The example I used tough was super simple so it probably isn't worth to add the library. But if you have an index.html that is pretty loaded then it would work quite well.
Thanks again!
up to this moment I thought npm and composer stuff was to be run on the server using Shell e_e I'm a self-taught, and used Notepad++ for all my projects, I'm installing Visual Studio Code as I type this now lmao. Thanks!
Love this tutorials so much 😍