Hey Trev, thanks for the series! I've been working on a web app, a few months now, and it was cool and all, but after these few videos... now it's AWESOME!!! Keep up the good work, and remember, we can always find a way how to make stuff, but the problem is what to make if you don't have an inspiration... and you have been an inspiration for me!
That last minute of outtakes with you wanting to punch your pc monitor.. love it :D:D ,really good tut Travis, tons of tricks to learn for, thank you a lot!!!!
You made my day man! It's really comforting to see, that even the best ones are wasting their lives to found out they forgot display: block :D Also, very helpful video, I have a little problem with switching elements (like sliders) so I fell like I am one step closer to be not noob, thanks! :P
Travis...you always surprise me with your vast knowledge ;) How can anyone know so much! I forked you and added a simple overflow hidden to the HTML tag to prevent scrolling nightmares on smaller viewports.
Thanks mate. I will definitely try and make my way there. Planning to see the company campuses around Palo Alto and Mountain View! Would be good to grab a drink then!
This might have to do with completing the visual design ahead of time but I can see your design skills improving when comparing this series to previous videos. I suspect working with other designers at Google has had an affect on that. It crazy how much just surrounding yourself with talented people can help you improve your skills.
Amazingly smooth explanation as if "Bleh, it's nothing; just easy stuff with easy functions and everything in lazy mode waiting for you to write them down and ..." the way you speak too :D It is not at all this easy when I start doin' it by my own such as the "transform origin" thing. How does it even pop up in your mind? I guess experience, duh! But setting it as "top left" and how that'd be as an image gif in your mind. You are like Master Uruguay but umm a cooler form of him with looks of Drake..I dunno, but I got one valuable thing from you which is your attitude. Thanks sir!
You're going to dissapoint yourself. Travis made it clear he is going to take his time with this series for it to be absolutely perfect, that takes time. Besides, don't the vlogs indicate that he's busy traveling right now? Try putting the effort of bugging him about the release into gathering some tutorials yourself. Travis is not the only one with good knowledge of Jquery.
Yeah it's off topic what im about to say but i couldn't find an answer anywhere else, i was just wondering how i can combine the background-color style with background-image in the same element. So for an example i would have a background color of red and an image of a mountain for an example, so they would basically fade in to eachother giving the background image a red feel to it. I would love an answer because i can figure out how to do it myself.
Hey Travis, nice video. Ofc you cant transition display: none like you already told in another video, but how about transition the max-height max width? This works fine in the most situations, sometimes I combine it with opacity: 0.
hey Travis, I am wondering how apple on their website use a pretty cool animation, when scrolling, macbook rotates a bit and opens, how does that work?
+Ihatetomatoes I think he's referring to the animation on the product page for the new MacBook (stupid apple naming schemes). When you scroll down, the laptop opens up
I am not sure which part of the page you are referring to, but most of the animations are done using CSS3 animations. The animations that are happening while you scroll down the page are using JavaScript to animate css transform property, mostly translateY. If you open the animations tab in the Chrome devtools and reload the page you will see the CSS3 animations in action. You can create the javascript scrolling animations using tools like Skrollr or ScrollMagic.
Travis I'm loving all your videos . they are entertaining lot of humor and you explain complex things very well. I have a suggestion though, could you make a video about taking a PDF and convert it to HTML/ CSS but from complex design and not only boxes here and there, I know you did videos about the topic from PSD to HTML but I did not find complex design you know like a drawing that go from top to bottom which is not possible to reproduce with CSS thanks in advance
Is jade now Pugjs as I can't seem to find anything about it except on the repo? . The website doesn't work and jade works great still from the cli. Just checking as I see you havent changed to it so I guess I shouldn't either. Why repair a working clock ;)
Another great video. Thank you Travis. I have a request can you make a video about (CSS3 :checked Selector). For example an image gallery with only pure html and css3. no javascript. thank you ( it would be very helpful if you do it :) )
Felt like rebuilding it in VueJS :-) codepen.io/Wiejeben/pen/mEYAmx it also collects the data now, which you could send to a server via AJAX. The button is now actually a button type="submit" so you can simply press enter to go to the next page. I had to do some funky stuff with the transitions because it has to animate in and out differently depending on if it's the last or first slide.
Hi Travis. Your videos are fantastic. I've been a fan since you started. I'm interested in putting form data into a MySQL database. I've been doing that with php but I would like to know if it's possible to do it through JavaScript alone. In fact, my question is how can I interact with my database using JavaScript? If you know if a good resource, would you please point me to it (or preferably would you make a tutorial - you are a very good teacher). Thank you!!
You could do that using jQuery. Look up $.ajax() here: api.jquery.com/jquery.ajax/ As for the form data check out this tutorial on scotch.io: scotch.io/tutorials/submitting-ajax-forms-with-jquery
If you needed also the backend in JavaScript then Node.js or Express could be ways to go. Check this StackOverfllow post about the topic: stackoverflow.com/questions/5818312/mysql-with-node-js
Trav uses jade. Jade is a node.js based template-engine or short a Preprocessor for HTML. The syntax is similar to Sass. At least a bit. regards from Germany, Patrick.
Well, since there's no other choice, i'd take 10 lives, too. It is off topic but what are your thoughts on developing VR based websites with A-frame? :)
Thanks Trav, love this CSS animations series. Keep it up man.
Thanks tomatoes :)
Chance haha, I didn't expect you here:)
Hey Trev, thanks for the series! I've been working on a web app, a few months now, and it was cool and all, but after these few videos... now it's AWESOME!!! Keep up the good work, and remember, we can always find a way how to make stuff, but the problem is what to make if you don't have an inspiration... and you have been an inspiration for me!
Awesome, thanks for your comment!!
That last minute of outtakes with you wanting to punch your pc monitor.. love it :D:D ,really good tut Travis, tons of tricks to learn for, thank you a lot!!!!
You are welcome! Thanks for watching the whole thing ::))))
You made my day man! It's really comforting to see, that even the best ones are wasting their lives to found out they forgot display: block :D
Also, very helpful video, I have a little problem with switching elements (like sliders) so I fell like I am one step closer to be not noob, thanks! :P
I learned more from your vids than I learned at college and university combined!! Thanks
Damn, I should start charging tuition!
+DevTips yep, your explanation makes much more sense that my tutors. Yes, as my tutor says never do things that you are good in for free. 😀
Just had to leave some kind words.. For me you're to most entertaining and at the same time very helpful coder!
Thank you Travis got a job after learning from your videos
Travis...you always surprise me with your vast knowledge ;) How can anyone know so much!
I forked you and added a simple overflow hidden to the HTML tag to prevent scrolling nightmares on smaller viewports.
Good call :)
Did the same with some graphical tweaks :)
It's so annoing to see that scroll bar pop in and out XD XD
Hey is it possible to see your forked form?
Here's mine: codepen.io/MrGrigri/pen/LkoWdj
Can you teach how to add previous button? And can you teach of adding buttons in the pagination?
Hello Trav! I swear I love this intro! made me laugh a lot! Great video.
Wanted to ask, are you into angular and that kind of stuff ?
In an other comment he wrote that that comfortable for now in angular :/
Nice video Travis. I'm going to be in San Fran in early September. Would like to say a quick 'hello' and chat about awesome web stuff!
I roam around mountain view, about an hour or so south of SF. If you come down we can get a drink.
Vids how long are you plannig to stay?
Another DevTip meetup would be fun :D
I'm planning to come from Turin and visit California in late September :)
Thanks mate. I will definitely try and make my way there. Planning to see the company campuses around Palo Alto and Mountain View! Would be good to grab a drink then!
mirko rener - I am there only for 5 days. Won't be there in late September unfortunately :( Would have been awesome to be a part of DevTips meetup!
Yeah, it's always great to meet like-minded people :)
Don't worry! Take care and have a nice holiday ^_^
you are truly an inspiration bro .thanks a lot a great tutor and developer
you are to nice Nikhil, thanks for watching mate :)
Yet another great video. Thanks Travis!
You are welcome, thanks for watching Christophe :)
This might have to do with completing the visual design ahead of time but I can see your design skills improving when comparing this series to previous videos. I suspect working with other designers at Google has had an affect on that. It crazy how much just surrounding yourself with talented people can help you improve your skills.
Oh that's interesting! Thanks for pointing that out!!
Amazingly smooth explanation as if "Bleh, it's nothing; just easy stuff with easy functions and everything in lazy mode waiting for you to write them down and ..." the way you speak too :D
It is not at all this easy when I start doin' it by my own such as the "transform origin" thing. How does it even pop up in your mind? I guess experience, duh! But setting it as "top left" and how that'd be as an image gif in your mind.
You are like Master Uruguay but umm a cooler form of him with looks of Drake..I dunno, but I got one valuable thing from you which is your attitude. Thanks sir!
Pretty awesome to follow your experimentations! Keep it up!
This is a great video, thanks a lot Travis!
You are welcome! Thanks for watching :)
travis, i have a problem with emmet. i am using emmet with atom that abbreviations work with only ctrl+e and i wants it works with tab
Thanks Travis. yet again another great video. also your Channel is growing into a nice interative one ;) Keep up the good Stuff!
Thanks Dirk, I appreciate the love!
Travis you are awesome!!
If you have time please make video series of input elements styling and other stuffs.
Thanks for the suggestion :)
Could you please make a video on perspective and vanishing points? thx:)
interesting, thanks for the suggestion :)
hey Travis. great video. in the future, I would love to see a tut on animating actual form elements from inputs to radios. thanks again
Thanks for the suggestion :)
Thanks for your help Travis. Much appreciated.
You are welcome!
I'm wondering why you are using a span, then give it display: block?
thank you , exists the possibility return the steps ?
Ohhhh baby that is one clean theme!
this is last time in asking
killing it with jquey?? I'm sad
You're going to dissapoint yourself. Travis made it clear he is going to take his time with this series for it to be absolutely perfect, that takes time. Besides, don't the vlogs indicate that he's busy traveling right now?
Try putting the effort of bugging him about the release into gathering some tutorials yourself. Travis is not the only one with good knowledge of Jquery.
yea, and I got a batman video game that aint playin it self!
+DevTips Rest and Relaxation. An important rule to being an efficient developer ^^
+DevTips which game
Another great video, keep it up Travis!
Thanks Hawk!
Through ur videos i learned more new things, thank u man
That's a win then!
Can you show how you did this switch from the third video? I like this switch, but I dont know how to make it.
How your html refreshes just on saving the code in text editor. Plz tell it is annoying to again and again refresh the page.
Awesome video! Thank you it open my mind with animations. Which program you use in that video for designing and developing the form?
Hey trav can i put triggers without using jquery but using regular javascript?
Yeah it's off topic what im about to say but i couldn't find an answer anywhere else, i was just wondering how i can combine the background-color style with background-image in the same element. So for an example i would have a background color of red and an image of a mountain for an example, so they would basically fade in to eachother giving the background image a red feel to it. I would love an answer because i can figure out how to do it myself.
Trav is the man!
The last minute and 10 seconds reminds me of everyday of my developer life.
Great to see 121 positive and happy comments *_*
No trolls and happiness for everybody
Back to normal :)
You are my leader!
I demand more cookies!
Hey how can i save data from a text input html in a folder
Hey Trav! Thanks for the videos, I love em. What's your reason for putting units after values of zero in transforms?
Nice! These videos are very useful & fun to watch.
Hi Travis, what screencast/Screen Recording software do u use?
Hey Travis, nice video. Ofc you cant transition display: none like you already told in another video, but how about transition the max-height max width? This works fine in the most situations, sometimes I combine it with opacity: 0.
in my face! Awesome video Travis :)
hey Travis, I am wondering how apple on their website use a pretty cool animation, when scrolling, macbook rotates a bit and opens, how does that work?
Hey Bartol, can you include URL of the page you are referring to?
www.apple.com/hr/macbook/
+Ihatetomatoes I think he's referring to the animation on the product page for the new MacBook (stupid apple naming schemes). When you scroll down, the laptop opens up
www.apple.com/macbook/ - notice even onload the macbook slides down and opens
I am not sure which part of the page you are referring to, but most of the animations are done using CSS3 animations.
The animations that are happening while you scroll down the page are using JavaScript to animate css transform property, mostly translateY.
If you open the animations tab in the Chrome devtools and reload the page you will see the CSS3 animations in action.
You can create the javascript scrolling animations using tools like Skrollr or ScrollMagic.
Awesome!
ps What about the course, when it comes out?
Travis I'm loving all your videos . they are entertaining lot of humor and you explain complex things very well. I have a suggestion though, could you make a video about taking a PDF and convert it to HTML/ CSS but from complex design and not only boxes here and there, I know you did videos about the topic from PSD to HTML but I did not find complex design you know like a drawing that go from top to bottom which is not possible to reproduce with CSS
thanks in advance
Thanks for the suggestion!
plz make a video related canvas or svg.
That DevTips commenting spree tho. Thanks, for the vids :D
You are welcome! :D
You are awesome brother :) thanks for the all this things.
You are welcome!
Amazing, You really save my life :D
Is jade now Pugjs as I can't seem to find anything about it except on the repo? . The website doesn't work and jade works great still from the cli. Just checking as I see you havent changed to it so I guess I shouldn't either. Why repair a working clock ;)
Yes, jade has been renamed pug, more info here: github.com/pugjs/pug/issues/2184
Thanks for the vid!
Awesome work. Keep up.
Great video man, Love this series. You are a great role model for me and I hope one day to be as talented as you! :)
cool .... can you think about something with CMS i mean this forum where it will sort the data ? we to know how to do CMS also as your nice way :)
Thanks for the suggestion :)
thanks . Sir, I need a file please how to copy and your project please sir .
Trav, u da man !!! tnx!!!
Thanks for watching!
Could you create a video using angular, developing a crud!!!
Sorry, I don't know angular.
I love this series! :D
yay!
Thanks!
Another great video. Thank you Travis. I have a request can you make a video about (CSS3 :checked Selector). For example an image gallery with only pure html and css3. no javascript. thank you ( it would be very helpful if you do it :) )
th-cam.com/video/d4P8s-mkMvs/w-d-xo.html
Thanks Travis this really helped me a lot. your the best man...
Felt like rebuilding it in VueJS :-) codepen.io/Wiejeben/pen/mEYAmx it also collects the data now, which you could send to a server via AJAX. The button is now actually a button type="submit" so you can simply press enter to go to the next page. I had to do some funky stuff with the transitions because it has to animate in and out differently depending on if it's the last or first slide.
Hottness. Thanks!
Thanks for great vid
You are super welcome!
Hi Travis. Your videos are fantastic. I've been a fan since you started.
I'm interested in putting form data into a MySQL database. I've been doing that with php but I would like to know if it's possible to do it through JavaScript alone. In fact, my question is how can I interact with my database using JavaScript? If you know if a good resource, would you please point me to it (or preferably would you make a tutorial - you are a very good teacher).
Thank you!!
That's not really my forté, but there is a comment on this video, someone re-wrote this pen to do just that.
You could do that using jQuery. Look up $.ajax() here: api.jquery.com/jquery.ajax/
As for the form data check out this tutorial on scotch.io: scotch.io/tutorials/submitting-ajax-forms-with-jquery
If you needed also the backend in JavaScript then Node.js or Express could be ways to go. Check this StackOverfllow post about the topic: stackoverflow.com/questions/5818312/mysql-with-node-js
+Davide Vico thanks Davide.
I changed all the animations :) check out my pen: codepen.io/masterdave/pen/BzZzPJ?editors=1100
That fold tho... SEKSY!
broken in firefox ;) but nice idea
+Michal Buzogan I should add some prefix then. Thanks for the heads up :)
Good . Thanks you
why does that html look like that
Trav uses jade. Jade is a node.js based template-engine or short a Preprocessor for HTML. The syntax is similar to Sass. At least a bit. regards from Germany, Patrick.
What are the pros of jade, should i start to use it?
great work and ya video recording is awesome. what's the secret behind ya recording
Your are the best
Waiting next video
Monday :)
Hasn't Jade now become Pug?
like the intro
where is validation old beard?))
As if you've done Forms this week! - I'm trying to create one for my website! #youreadmymind
that's a win!
We love you Travis!
You disobeyed the 12 Basic Principles of Animation!! haha..
I want to play a game! :D
What's your answer? I'd take 10 lives.
Well, since there's no other choice, i'd take 10 lives, too.
It is off topic but what are your thoughts on developing VR based websites with A-frame? :)
one day I want to be that good...
Keep at it, you'll be better in no time.
+DevTips to be honest I had no idea that CSS is that powerful and is able to do such things!! Cheers 😀
Hi Travis,
I have a friend who looks exactly like you. :D
Is he evil?
I read my comment and it's not PDF but PSD
sorry
oh, haha! I was like. Well, that's pretty unusual, but okay!
Nice!
I think this will work nicely for one of my projects! ¬¬ Steal!
Link when you are done!
Are your videos CSS porn or what? 😂😂😂
We want a bonus video of the 6 minutes of problem solving ✌️
its just 6 minutes of a blank stare on my face. I did, however, cut all my mumblings together and put them at the end of the video.
+DevTips Good 😂😂😂
Your videos are way too long - yet interesting.
I was never good with brevity. Personal flaw.
I think you fucked up. Your suppose to grow hair on your head and shave your face, but you grew hair on your face and shaved your head.
aaaand I don't understand shit