Let’s Animate with CSS (and Failing Fast!)

[@szlain]

Sometimes I watch you guys do .js and it makes me feel bad about how much I still have to learn... Watching you do css makes me feel better. 😂❤️

[@OfficialDevTips]

Ahahaha! I appreciate it! It's a very humbling experience to try something outside your box/comfort zone. No one said CSS and frontend was easy - be proud!

[@szlain]

@@OfficialDevTips codepen.io/russatkins/pen/MqBYMW

[@olimpioadolfo7498]

I feel the same like "How come this badass guys cant center an item using whether grid or flex but they manage to do awesome things using js.... mannn is weirdoooooo.....LOOOOL

[@nina2602ais]

hahaha I feel the same

[@olimpioadolfo7498]

Ohhh Thanks... KKK

[@TraversyMedia]

Just started the video, but “Live Server” for vscode my friends 👍🏻

[@phonographiq]

Yo this guy put me onto Live Server, AND LOOK AT US NOW

[@ikezedev]

Hey boss.... They should watch more of your videos 😍

[@md.akib5124]

i was about to tell that but boss brad has already suggested

[@pradhumnapancholi4350]

Yeah, using it from like when I started learning to code.

[@DarkZoneGamingMain]

In a strange paradoxical twist sort of fashion lol you guys can learn more about Keyframes from.... wait for it.. DEVTIPS! Travis used to have some great vids on css animation series which included great examples on using @keyframes lol.

[@_whittington]

Use the live-server vs code extension for automatic reloading

[@OfficialDevTips]

YAS - thanks!

[@bibibobs]

A bless for prototyping

[@chmoxster]

yes, this is the simplest way: www.npmjs.com/package/live-server

[@GaurangRShah]

Simplest and best way to live reload in vscode: marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

[@krantinebhwani6125]

Search for 'Live Server' in the extentions search in VS Code, it's an amazing tool just right click your html code space and select 'Open With Live Server' and that page will reload whenever you save. There should also be a 'Go Live' button on the bottom right of VS Code for you to click to go live, its usually shown next to the `ln, col` status.

[@zekezekeish]

Dev Tips was the number 1 source for me to learn CSS when I was starting out, so it is *very* weird to see hosts of the show struggle with relatively simple CSS stuff :D. The positioning is correct, but the way you guys scaled the SVG is bad from the performance point of view. As MPJ noticed the animation appeared a bit glitchy because the animation was dropping frames. I know it doesn't really matter on this use case, but to the viewers - please never use this approach in a real website or app. In this case the proper way to scale the SVG would have been the "transform: scale();" property. The ground rule on using transition is that try to stick with transform and opacity. Using transition with those two properties is the cheapest way to achieve smooth animations.

[@Ecker00]

Center a SVG, "let use CSS grid". 🤣 Then scroll right past the correct answer on CSS tricks. 👍 This was the best coding comedy ever, me and my wife rolling on the floor. - PLEASE DO MORE CSS.

[@PaulMcCannWebBuilder]

After watching you guys explain difficult-to-grasp JS concepts for many years, it's life affirming to watch you two fail miserably at something that takes me less than a minute to code. Thank you, thank you, for restoring my confidence in my own skills. I think I'm going to raise my hourly rate because of this video. MPJ saying "this is soooo hard' when just trying to center a logo on a page brightened my day. Tip 1: if you first save your file as html, VS Code's Emmet shortcuts will kick in. You can then type an ! and hit tab, and it spits out the html document structure. And use the live-server extension for live reloading. Tip 2: DON'T animate position or width/height. Use the transform methods instead. You'll get sub-pixel animation, it uses the GPU, and doesn't require the browser to repaint the page for each pixel movement. Here’s the right way: codepen.io/paulmccann/pen/JaBRwR Tip 3: Like MPJ mentions, you can use a custom ease. Play with this tool : cubic-bezier.com/ and replace ‘ease-in’ with cubic-bezier(your numbers) Tip 4. You can animate the elements inside the SVG with CSS. Select the SVG elements just like they're HTML elements. So for example, the circle can drop in, then the text can pop in. Or even draw out the text if they're done with paths. I’d have to invoice you for any more tips.

[@AustinMarlar]

This is painful to watch.

[@mauricioberlanga]

Almost as painful as writing CSS yourself

[@abdellahcodes]

I consider you both my teachers, and seeing you going through this just reminded me that no one has all sides covered, perseverance was key here, maybe the biggest lesson of this episode. You deserve support while up or down. Keep up the good work.

[@faraonch]

As much as I hate CSS, I feel good watching these pros failing with it. This reminds me, I only know CSS coz I fought against the same bullshit over and over again until you everything by heart.

[@fullmuppet]

This was painful. Class vs ID.

[@GifCoDigital]

You always want to use CSS transforms as they are GPU accelerated. The animations will look much smoother. So instead of animating width which is not accelerated use transform scale()

[@andreaaldrich4046]

I feel better about myself now... you guys have lightening fast clicking skills.

[@charb423]

I admire you two as amazing developers and seeing this video, I was literally laughing because you both broke the 1 rule of programming, planning your idea and prepare via researching the topics but I really feel like this was a realistic and ideal situation that I even have been in and I was by myself struggling lol. I try to plan and prepare for my projects but sometimes time takes over and you just have to be hands to keys so to speak. I also enjoyed watching you both really try out an area of development that you both really don't work in often but still tried different ways to make it work. You didn't give up but still managed to continue. Really enjoyed this video :)

[@sekenikola]

I'm so glad I watched this episode because it boosted my confidence and make me realize that you really can't know everything. If two of great programmers are struggling with the position in CSS than why should I know every single detail in JS, HTML, CSS or any other stuff. Thank you guys. You dont even know how this episode helped me.

[@mathewwhite2137]

Loving the format guys, keep it up!

[@PGDJ88]

"We had people doing the HTML and CSS while I was doing the developing" shots fired.

[@bramchito]

Great episode! I was surprised to see you didn't really use inspect devtools to debug the various steps. That would have revealed the html height and class/id issues instantly. I always slap a border on containers in these situations, a bit like console logging throughout but with layout.

[@charliebrown2432]

This is a good channel because these guys show their errors, mistakes, and fuck up and how they come back from them and learn. It shows whether your still learning or actually have a web dev job that mistakes are just part of the process. I think the difference here ultimately is the fact they take a break and totally divert the focus to something else, when a noob would continue until their fingers tips bleed and eye balls blood shot to shit. Noobs hack to long, and pro's take cookie breaks.

[@courseiam]

Haha this vid makes me feel so much better about my own CSS skills

[@sachin0321]

To center the logo - position: absolute; left: 50%; top: 50%; transform: translate (-50%, -50%);

[@olimpioadolfo7498]

Thanks dude... Good tip using only box model.... LOL... But with grid or flex would be easier

[@nicoregules]

#parent{ display: flex } #child { margin: auto } Boom!

[@josephallain1437]

Would- #child{display: inline-block} #parent{text-align: center} work ?

[@josephallain1437]

Oops forgot about vertical positioning

[@NilsWesthoff]

@penHolder don't use this in production though, flex combined with margin has MAJOR issues on any Internet Explorer (even 11).

[@smilebagsYT]

For live-reloading browser: NPM package called browsersync can run as a server and automatically reload based on file changes.

[@phonographiq]

This is horrible and terrific, I love you guys

[@UniBreakfast]

The clicky title should be: "How to center logo on a page in just 20 minutes!"

[@RonLunde]

I think most of us have known exactly what we want to do in CSS and then struggled to make it work. Also, most of us have been in a hurry, especially when we want to "just get past the CSS so I can do some real code". I loved this video because you made it realistic!

[@soroushowji8265]

position: fixed; top:50%; left:50% transform:translate(-50%,-50%)

[@bjornleonhenry9750]

wow, this was the best CSS tutorial ever, thanks you guys are awesome =)=)

[@karaschaefer718]

Nice work!! The id/class thing was unfortunate. The only thing I can decisively say that I would have done differently would be, if I was doubting that my changes were working at all, I would have just put a coloured border or something around my element to make sure that I was impacting change where I wanted to .... if that makes sense. Thanks for the video!

[@revillsimon]

This video is perfect evidence for beginners that you don’t need to memorise code. No one can remember everything, even these advanced devs.

[@szilard-tibormarton4879]

Just install "live server" plugin for vs code, and open local server that reloads your html.

[@JamesCairney]

That brightened up my morning so it did :-)

[@AntonKristensen]

Loved the video!, some hillarious "mistakes" but fun to see the pro's in developement having a rough time with such a simple "markdown" language... and also great to see the fun experience of success when it finally became to be what was planned, i must admit the class vs id was something i almost got annoyed over xD but anyways a great episode! Hope to see more!... Idea: takle the animation with cubic-bezier and adding the timing function to the keyframes "animation-timing-function:ease-out;" Would love to see the logo bounce once it landed on the "plane"... + add some shadows!

[@nicoregules]

#parent{ display: flex } #child { margin: auto } Boom!

[@Ecker00]

Learned something new there, cheers. Didn't know margin-top/bottom would auto like that. Only on display flex?

[@onkaryerawar99]

@@Ecker00 yes only on display:flex :)

[@pascovicidinmoscova]

1. Center it in the small format (flexbox) 2. transform: scale(10) 3. animate from scale(10) to scale(1) 4. It's jaggy because animating the size/position will only use the cpu, transforms take advantage of the gpu and will render a simplistic animation at a sure 60fps It was nice of you to try something completely new

[@kazaakas]

It amazed me how much a person that learned me so much about JS fails so hard in stuff that seems so easy to me. haha. I was quite baffled how little the element inspector was used as well. If there's anything you should check out first when it comes to alignment problems it's that..

[@blacknbone]

Haha you can use the browser devtools to analyze your running code(css,html,js). Always comes in handy. Vs code has dozens of extensions for what you're looking for too(code for-matters,live-server,linting and more)

[@circulardep]

Could you perhaps use the transform: scale() to resize the logo? Instead of changing the width/height manually etc?

[@davido825]

If you want quick auto reload just use parcel. no config needed, just run from command line.

[@UniBreakfast]

I would suggest Live Server extension too, but "You type and I'll refresh" is so much better as a FunFun show! )))

[@peppenas7103]

Haha använd display flex för att centrera och transform scale. Sjukt kul att se på!

[@puyanwei]

Feels like you guys should have watched some older DevTips videos xD But seriously thanks for including all your mistakes in the process!

[@justinoneill2837]

you guys can use any way to position, but you should only use *transform* with your animations and the will-change. that way it will use the gpu instead of cpu and your performance will be way better

[@bogdanmoraru6445]

VS Code has an Extension called Live Server

[@Soundtech98]

Auto-reload the page: Live Server extension is the answer (marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer). Highly recommend installing it.

[@akt255]

I don't know if you should do this or not but I search the problem directly. I would have googled " 'align-items' doesn't center items vertically" and got the solution from there instead of just trying random things. I also read too many tutorials and docs which can be distraction sometimes. So, I am improving upon it.

[@anstapol]

You can call me when you have problems with html & css stuff ahahahah. Guys you are pros coding but today you made my day =) Thank for that.

[@ahmed35443523]

The i would do it is by: center the container with flexbox and use transform: scale(something); for the animations that way you won't have to do hack width and position stuff

[@madebylewis]

The last link you'll ever need for centering in CSS, can't believe I'm passing the torch 😂 output.jsbin.com/honawo/quiet

[@cs_devel]

Only animate properties like transform and opacity. These are less CPU intensive than all others. You can see the result in the audit tab of Chrome. Animating transform or opacity just works on composite layer, all other properties work on earlier layers and need to be recalculated. I would use flexbox for centering, as you did before. Then I would use the transform: scale(1, 1) CSS property. In the animation, you could do 0% { transform: scale(5, 5); } and 100% { transform: scale(1, 1); } That would be a quick and dirty way.

[@rishabh_7k]

Watch previous videos on the channel, you will learn a lot of css.

[@besjansejrani1880]

Hi David, for the reload html and the css, why do you just don't use webpack and configure the params for the watch settings ?

[@danielxfuture2173]

Live-server extension for VSC is pretty good!

[@whoami-so2hy]

i really enjoying all video that u make, thx u sharing my bro

[@hemicar92]

There is Visual Studio Code plugin, called Live Server, it is very helpful when writting static pages.

[@AndroidHacksAH]

I would have done position: absolute from the start since there's only the logo in the entire page

[@Use-Software-Faster]

This was so Entertaining ! Thank you

[@SoumyaKantiSar]

The correct way to do this according to me would be Center using flexbox (as shown in video earlier) and then use Transform scale to do the animation.....

[@albertilagan]

I would have use display grid like you first did. Set fix width and height to the logo like 500px each. Then set scale to twice or trice as much depending on your needs, as default. Then animate the scale to 1 (which is 500px x 500px)

[@RockCYP]

using flexbox. Parent { display: flex; align-items: center; justify-content: center; } will vertically and horizontally align in center a child element(s)

[@deeePhoenixx]

Use the live server plugin in VSCode or you can use Prepros from prepros.io

[@circulardep]

I thought this would be solely about animation, not watching 15 minutes of you guys figuring out how to center something with Flexbox 🤣

[@OfficialDevTips]

We sure believe that too :D

[@circulardep]

Honestly though, I really like the fact that you're showing your "human sides". I like that a lot more than those instructors who just show you how things are done in a perfect matter, and leaving you off with the "perfect result possible", even though the reality is different for most programmers. You constantly run into errors and problems

[@abumbarnaweb7421]

I was gonna stay that too. I really love their format as it feels real; it shows us that being a programmer is all about how to refer to the documentation to achieve the desired goal. Well done to the DevTips Duet!

[@davi_singh]

i mostly use gulp for with the browser sync module, this is also cause i use sass a lot

[@GaurabPyakurel]

For vs code insiders: (this may work in vs code als0) 1st enable auto save from file. 2nd go to setting and find "auto save" and choose "afterdelay" there 3rd change the time for auto save delay to 0.01. . Doing this the file will save automatically when ever changes are made, we don't have to press ctrl +S everytime. And this will also updated in browser when we are using live server... thank you

[@madebylewis]

Series idea: CSS shenanigans 😁👌

[@emanonmax]

I probably would have taken Flexboxes too. But this video reminded me of last year in uni. Basically what you were doing but for a whole semester.

[@albertilagan]

You should have set the html and body width and height to 100%;

[@manualvarado2212]

The npm live-server package is what you are looking for!

[@NilsWesthoff]

Parcel.js does hot reloading (for basically anything) and it's 0-config and it's perfect.

[@NilsWesthoff]

The performance was bad because you were animating width (not the scale transformation you deleted from the example). CSS has to reflow the entire page if you change the width, when you transform scale it just scales up that particular thing, but leaves the bounding box the same size, which means it doesn't have to rerender everything. See csstriggers.com for future reference about this. Even better would be to use transform-3d with scale as a property, because then it would use the GPU as well. As to why scale didn't work, my best guess is that scale was already at 1 before you started animating, though I'm not entirely sure.

[@roopegarcia]

You guys are awesome!

[@RabbitWerksJavaScript]

liveserver by Ritwick Dey is great for live reloading!

[@lucasdebritoarruda7831]

Well, everything would be a lot easier if you guys have watched DevTips videos about centering using CSS.

[@milehighsi]

Set position/width/height once only (doesn't really matter how but I'd absolute position using calc(percentage-pixel dimension) personally). Then use a single value transform:scale for the @keyframes animation. Easier to code and you get free GPU acceleration.

[@DanielPersson]

body { height: 100vh; width: 100vw; }

[@kunalmohta2499]

Use watch-http-server npm package to create a live reload local server

[@ellisj98]

As a front end developer it was painful watching this haha

[@dhruvsinghal3200]

Align it in Center with Flex Box. And animate by manipulation transform:scale

[@martinmondzelewski914]

Using CSS transform Property would be smother because of the 3d acceleration and on body and HTML should be a overflow:hidden.

[@emanonmax]

No, I love the fff intro. Dont ever change it

[@cafelinuxero5666]

Lets do math, if screen width is 100% and height is 100% percent, and your object is 200%, you have 50% extra of screen to all sides. If your object is 300%, that means 100%. There are no special cardinal rules

[@7h3mon]

.parent { position: relative; } .child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

[@abdullahalharbi514]

Rofl: i would use: position: absolute; to center the svg and using a property called `transform: scale(5);` in keyframes 0% {transform: scale(5);} 100% {transform: scale(1);} it should do the magic

[@_edmoore]

Haha. This was painful to watch. I was close to yelling at the screen. LoL. But it's good to show how you work through the problem, even if it's not the simplest solution you could have had.

[@OfficialDevTips]

To all you "absolutely position with top left instead of transform" HATERS out there. I fixed it: kzbin.info/www/bejne/famVZYafoLKZfdk 😇

[@sezyara]

Hey! Your container of "svg" is a not "html" :3 Container is a "body" and you need set height of your container... Sorry for my bad English c: Thanks for your videos, very very funfunfunfun :3

[@albertofunk1167]

Me: body.. Body.. BODY!!!

[@jakelacey3354]

autoreloading html => parceljs, parcelbunder thing

[@evans8245]

Maybe jokes on us, they were trolling us ? XD

[@OfficialDevTips]

If only this were true... 😅

[@ViniciusRocha-bl1lk]

Maybe the CSS property 'will-change' can improve the animation.

[@NicholasMangos]

I think the main issue is that they are animating the width and height properties instead of using the transform property.

[@MarcelRobitaille]

Who needs scale(), amiright?

[@albingroen]

When using VSCode you can add this plugin to serve a static website on a node server and get live-reloading. github.com/profimedica/LivePreview-VSCode-Extension

[@TheSldsnake]

I love dev tips !!!

[@ShisuiElric50]

you can teach functional programming but cant center a element on the screen, beatiful

[@Diamonddrake]

The old logo was a good logo. Not sure why it needed to change

[@MuhammadAdnan-gx6rd]

Last property was justify - content

[@0xkvn]

Also you should have just kept your flexbox centering and just used transform: scale(10) to transform: scale(1) :p

[@ConnorAZ]

Hey Guys Use Browser-Sync You Can Install It With NPM (Node Package Manager). Type This Command :- npm install browser-sync. And when working with vscode go to the directory your files are stored in and open a cmd there. And type this command :- browser-sync start --server --files "*" .This Will Reload All Browsers That are open with the link it provide it usually localhost:someport .And the great thing is it sync all the tabs no matter what you are looking at it sync your scrolling and everything .keep in mind that this does not support PHP files you have to specify each and every file individually.....Love You Guys

[@matteobarbieri2989]

you guys are crazy!

[@sprintwithcarlos]

I love Briliant!!! Good episode

[@anythingforweb]

Sooo funny! 😂😂😂