Use the Chrome browser's animation dev tools to record, analyze, and reverse engineer CSS animations. #css #webdev #shorts Official docs developer.chro...
Пікірлер: 555
@fgsaldanha3 жыл бұрын
Pro tip for advanced programmers: use Ctrl + C and Ctrl + V
@Fireship3 жыл бұрын
Good call, I wanted to keep this more beginner friendly with right + click
@nowifi4u3 жыл бұрын
That feel when Ctrl+C and Ctrl+V are not beginner friendly :P
@aquual14623 жыл бұрын
@@Fireship lets not forget the mac users :)
@arafatzahan20823 жыл бұрын
But it's not cross platform solution.
@zyansheep3 жыл бұрын
@@dixztube yeeeeee I wish I was good at vim, but its just so slow for me
@rubenforner3 жыл бұрын
"Animate like a pro by right click copy and paste " loved that ❤️
@poujhit3 жыл бұрын
Lol ya🔥
@tanmay______3 жыл бұрын
“If you steal something, make it better”
@PajamaPalace3 жыл бұрын
Stack overflow would be proud
@nap2t3r3 жыл бұрын
That was priceless
@husseinkassem4943 жыл бұрын
Thats actually how it works
@seasong76553 жыл бұрын
- Why should we hire you? - Look at these fancy animations...
@elementiro3 жыл бұрын
- Why should we hire you? - I can copy and paste...
@Eldalion999993 жыл бұрын
you are joking, but I got legit aproached by a company cuz of this reason
@radwl3 жыл бұрын
- Hired
@diegoalvarez4372 жыл бұрын
@@elementiro I know how to vs I can is the huge difference 🤣🤣
When you thought it was impossible to learn stuff in just 100 seconds, he comes along and teaches you something in almost a third of 100 seconds. Kudos to the man, everybody!
@RobertWildling3 жыл бұрын
You mean the right-click pro tip? :-D
@Kevin-jc1fx3 жыл бұрын
@@RobertWildling Nah, that was just so that the beginners around here won't feel excluded. The advanced programmers already use Ctrl+C and Ctrl+V 😂
@troler71473 жыл бұрын
@@Kevin-jc1fx No they use v and p
@sodiboo2 жыл бұрын
@@troler7147 Yeah, most people think Ctrl+C and Ctrl+V is important, but don't realize only half of that is true. Ctrl+P is way more important than Ctrl+C, because it lets you print in 2/5ths as many keystrokes in python, or 1/9th as many keystrokes in Java. It's way faster and way more important than Ctrl+C, since you can always right click copy from stackoverflow, you're already using the mouse anyways
@catmankitty95043 жыл бұрын
This is the best CSS tutorial I've ever seen
@CST19922 күн бұрын
😆
@verified_tinker18183 жыл бұрын
jokes on you, my boss pays me for this
@FalseDev3 жыл бұрын
The ending about copy pasting was smooth
@Optimistas7773 жыл бұрын
but serious, isn't copy pasting other people's code a copyright infringement?
@Nicistarful3 жыл бұрын
@@Optimistas777 In that case you're copying an animation / transition from a stylesheet. Animations in CSS are often just transitions defined by curves. Curves are math. You can't copyright the principles of mathematics.
@gnsf3 жыл бұрын
@@Optimistas777 kind of, no one will notice that
@Optimistas7773 жыл бұрын
@@Nicistarful animations and graphics require creativity, by definition. also, possibly many hours tweaking, tooling, etc. Also, images are easy to compare for infringement, some advanced animations, movements as well. But regardless, all animations and pictures also contain inherent "fingerprint" through the uniqueness of the least significant digits - in other words there are many ways to paint a circle, but only ONE way out of millions to paint the circle exactly that way down to each pixel shade and animation millisecond
@valerioharvey72895 ай бұрын
@@Optimistas777 no one own a bunch of CSS code. And they can't do anything about it, since Google allow people to see the web's code
@febrilian3 жыл бұрын
Me, a backend developer: "Hmm interesting 🤔"
@stackoverflow21553 жыл бұрын
Hacker : **slaps website backend with payloads** Hacker : This bad boy can fit so many vulnerabilities.
@MM-vr8rj3 жыл бұрын
@@stackoverflow2155 BURP
@emperorreload3 жыл бұрын
@@MM-vr8rj Suite
@CodeX-xyxy11 күн бұрын
If you are backend developer and do not how front-end works then you absolutely suck
@kushpatel656721 сағат бұрын
Is it only me as a backend developer who thinks css is way more harder than beckend?
@madloop32173 жыл бұрын
“Good artists borrow, great artists steal.”
@Optimistas7773 жыл бұрын
but serious, isn't copy pasting other people's code a copyright infringement?
@caparazo34883 жыл бұрын
@@Optimistas777 I think it might get too complicated since they're CSS properties.
@Linkeshvaranrr3 жыл бұрын
@@caparazo3488 😼
@user-zi8lg5qu1h3 жыл бұрын
@@Optimistas777 There is no such thing as copyright for functionality, you can copy an animation sequence and mostle anything that isn't patented or trademarked.
@MrDyln2 жыл бұрын
@@Optimistas777 coding is considered creativity and as such is covered by artistic copyright law. As such, if you copy the entire website. That's a no-no. Borrow a piece. Okay. Borrow a piece and adapt it. That's transformative, baby! Now you're a coder and an artist!
@fikrad03 жыл бұрын
Last step don't tell your friends you copy and past : trust me 😅
@realSeyitan3 жыл бұрын
True. Also, it'll be a good idea to understand the code.
@codiumyt3 жыл бұрын
past?
@lucadelauw90393 жыл бұрын
@@codiumyt pasta
@silverzero95243 жыл бұрын
they know
@bogota24643 жыл бұрын
If you do that **once** they’ll say you copy-pasted everything from now on lmao
@ThiagoVieira913 жыл бұрын
Now I can do fancy animations in less than 38 seconds. Got'em!
@RobertBrunhage3 жыл бұрын
The pasting part is my favourite 😎
@sauravadhikari86453 жыл бұрын
Well, I am sure that, one of the requirements to be a developer is to have great deal of experience in copy pasting.
@dablulite13 күн бұрын
I cannot even begin to describe how useful this is to me, I've been looking for something like this for months
@mukeshwarvarma99573 жыл бұрын
Duuude. I was asked today to look at how a website did their animations and I had no clue where to start. Annnd then this shows up on my recommendation 🤔😯
@klauseba3 жыл бұрын
Just a coincidence. I'm not a developer but I also got it as a recomandation. And there's 7 billion other people on earth so no illuminaty confirmed.
@mukeshwarvarma99573 жыл бұрын
@@klauseba ok what I actually meant was not recommendation but Jeff uploaded it on the same day I was supposed to look into animations. Correction*
Freaking hilarious! 😂 Yet super informative, I didn't know about the Animation Panel in Dev Tools. Awesome.
@blackerhawk15082 жыл бұрын
For me, was awesome to discover the code coverage one
@mike222739 күн бұрын
Bonus tip, this works for front end, back end, database, APIs… email bodies… birthday cards… wedding vows… It’s really a universal software development trick
@rmoyni33 жыл бұрын
All these shorts’ endings are fantastic 😂
@TheEpicFace0073 жыл бұрын
I love your sense of humor
@Fireship3 жыл бұрын
I wasn't joking
@jaydstone21 күн бұрын
@@Fireship 💀
@MM-vr8rj3 жыл бұрын
Finally a thing that I knew already. Guess I'm a pro at reverse engineering static websites now. Maybe a tutorial on how to reverse engineer JavaScript? (please in depth and not just inspecting the event handlers of an element)
@marufhassan6343 жыл бұрын
Expert devs and designer taking months to create flawless animation . . Me- Copy paste goes brrrrrrrrr
@contactdi84263 жыл бұрын
LOL 🤣🤣🤣 Copy Paste goes brrrrr...
@klauseba3 жыл бұрын
just like China
@lycan24943 жыл бұрын
LMFAOOO
@ianbdb76863 жыл бұрын
Must be from sneaker twitter
@Calupp3 жыл бұрын
Literally the only shorts I've ever "liked" Please keep these coming
@sauravadhikari86453 жыл бұрын
Keep up with these short vertical videos, they are awessome. Your works really makes the day.
@daniel_q402 жыл бұрын
Dude... the freaking animation panel indeed exists, crazy. Been looking for something like that for a long time
@ideas-matter2 күн бұрын
Copy/paste, that's perfect I've been practicing that for 20-years. Getting really good at copying stuff, but sometimes I paste it in the wrong place.
@snopzАй бұрын
We need a video on how to know where the random values in the requests comes from / made
@11vag3 жыл бұрын
Man, these shorts are fireeeee. I love the sense of humor of this dude.
@mrbjjackson3 жыл бұрын
Dude the rate at which you're putting videos out lately is insane. Is it just you making them or do you have a team? Either way it's impressive. Just please don't burn yourself out! We need you to stick around!
@AyushSharma-id3ld3 жыл бұрын
0:14 Ctrl + Shift + P. But Great content as always. Your tutorials greatly improved the quality of my project. Keep up the good work.
@zidaanhayat42863 жыл бұрын
Kudos to the most accurate web dev tutorials known to the internet
@user-zo2ky4mz7d3 жыл бұрын
I was literally just thinking about this this morning. Thank you for this. Although short, but it's gold. 🔥
@alirahmani56013 жыл бұрын
I love these new #Short stuff.
@KastanDay3 жыл бұрын
This was very well made. Probably took forever to put together.
@FalseDev3 жыл бұрын
Me a backend developer watching this anyways:
@cristianmartin37063 жыл бұрын
Best channel in youtube no cap
@brianalpert17863 жыл бұрын
Student who only knows C/C++: hmm yes interesting.
@self-interest.24 күн бұрын
Honestly the best advice you can give because these days companies want you have unimaginable skills
@aloblanko Жыл бұрын
I Love that pro Tipp at the end 😂😂
@ThomasConover9 күн бұрын
Bro is flexing his reverse engineering skills in the face of noobs without pissing them off. That’s a pretty impressive skill in itself.
@Atanepes28 күн бұрын
Yoo , thats a neat . 👌 thanks i need more of dev tools tips secrets
@CoderFromPakistan16 күн бұрын
There's also an AOS library for that, it animates on scroll.
@piotrszewczyk97493 жыл бұрын
Oh man :) You're gold. You poses every single virtue ideal engineer should have: Precision, practicality and darn good sense of humor.
@spirits__3 жыл бұрын
Great tip. Will definitely use this to center my content
@SoulDragonXI3 жыл бұрын
I am glad other people do this I'd feel bad, seeing something I liked on a website and copy-paste it for later, and redesign it fit the style of the project.
@maximotejedapozo93353 жыл бұрын
I love all these pro tips.
@kuntaldas28433 жыл бұрын
I think it existed in Fire-fox long before it came to chrome Dev tools.
@AbhinavKulshreshtha3 жыл бұрын
Yup, I remember "borrowing" animation many years ago. Firefox still has better developer tools than chrome. Chrome did have better performance visualizer once, but now firefox also have a decent one.
@Ainigma3 жыл бұрын
Didnt know about the animation panel. Sweet!
@alienfunbug2 жыл бұрын
I can’t upvote this enough!!!! Blazing fast storefront with optimized ui/ux: cool. Parallax scroll five raw images: OMG YOU ARE A GOD!
@ziaahmad87383 жыл бұрын
Damn those right click tricks are so good : D
@numonamir91453 жыл бұрын
He has very clear voice to train someone
@cesarmurillo61923 жыл бұрын
Good artists copy great ones steal. This just help me to copy (well let's say reuse) some animations I was trying to implement from other websites. Thank you so much man!
@ethereal4110 күн бұрын
Wasn't expecting true and bartelby here ever
@madannikalje7603 жыл бұрын
Thanks man that's life changing
@troyfitz16382 жыл бұрын
Needed this Google algorithm doing work!
@basdfgwe3 жыл бұрын
Nice love these type of vids.
@rul117514 күн бұрын
This is the cheat code for every design.
@BukanReviewBR3 жыл бұрын
I'm new to this channel. This guy's tone is always serious so I can't tell if he's serious or joking
@goobsterBS7 ай бұрын
It’s an AI voice
@noumanshah42753 жыл бұрын
That force state saved my life
@ObinnaWGMI3 жыл бұрын
0:00 I love the fact he put flutter in the meme
@morshedulislamriaad64963 жыл бұрын
That's awesome. Can you do a full project?
@SargentPDA2 жыл бұрын
I feel that most people won't appreciate the True wow in the beginning
@abdullahatif785428 күн бұрын
It's actually ctrl+shift+p. Had to Google it cause ctrl+p wasn't working. Anyways, awesome content as ever. Now I don't have to go into depression everytime I see a fancy animation and can't figure out how they did it XD
@cereal95257 күн бұрын
Bro, literally what i do pretty much all the time.
@MobiusCoin3 жыл бұрын
Nothing more pro than Ctrl + C, Ctrl + V
@wanjohi2 жыл бұрын
This guy adds too much value to us We must protect him at all costs... I repeat at all costs
@milodevs8 күн бұрын
Remember Ctrl C Ctrl V is faster that doing it yourself from scratch
@steamcode44412 жыл бұрын
Amazing vid, I don't know if I'm advanced enough to understand it yet though :)
@Adomas_B2 жыл бұрын
Great! Now I just need programming friends. Can you make a video "social life in 100 seconds"?
@itzmeB23 жыл бұрын
When ur early but don't know anything funny
@Fireship3 жыл бұрын
Gold! 🥇
@adarshkumar-jw2nz3 жыл бұрын
@B2 medal passed down to you. 🏅
@itzmeB23 жыл бұрын
@@Fireship thanks for the vid bro. I didn't know that Google Chrome developer tools had that much animation visualization tools
@spg63803 жыл бұрын
You're like sorcerer Supreme of web development.
@AToubar13 жыл бұрын
For mac users, CTRL + SHIFT + P opens up the Command Menu.
@realSeyitan3 жыл бұрын
"like a pro, right click copy and like a pro right click paste". Professional advice to become a pro
@azatecas3 жыл бұрын
Bro this is a time saverrr
@nytrАй бұрын
Oh shit, I didn't know about this animation window :D
@baobuiquang97433 жыл бұрын
I don't know why but I find this video both helpful and funny at the same time
@neo76483 жыл бұрын
So much info in so little time 👍👍
@not.yet.famous94182 жыл бұрын
First Flagship vid I ever saw I fell in love 😍
@elohell522924 күн бұрын
saving for future references
@zhuolintsai90303 жыл бұрын
The last step. Thought we didn't notice. But we did.
@komakaze13 жыл бұрын
Shorts like this need a save for later function 😉
@shivensaini36433 жыл бұрын
Trait of good developer : Knows what to copy and paste, Simple!
@PonthiusWebDesigns7 күн бұрын
I showed my friends hello world... Guess who's a senior developer.
@tjmarx22 күн бұрын
Today I learned web developers have friends.
@maksym.koshovyi3 жыл бұрын
Two most powerful shortcuts: Ctrl+C + Ctrl+V
@joblessboy70303 жыл бұрын
I never considered myself a pro until today.
@JohnCarloCahimat2 жыл бұрын
man you're exposing my secrets
@cuy4z2 жыл бұрын
I love you, man.
@pritamhalder59623 жыл бұрын
this is what we call a PRO - Grammer move 😂
@Rundik3 жыл бұрын
The good old copy paste technique never lets down
@matteozhang71403 жыл бұрын
So genius, yet our hero
@zeffali2 ай бұрын
Backend developers -- now I know how to center a div
@aaron62354 күн бұрын
Front end developers that write their own css are livid right now 😂
@GuitarJoshB3 жыл бұрын
10 out of 10 would definitely recommend... just don't give away your magical secrets
@devnol3 жыл бұрын
"Hippity Hoppity, your code is now my property" - Dani, 2019
@Optimistas7773 жыл бұрын
but serious, isn't copy pasting other people's code a copyright infringement?
@klauseba3 жыл бұрын
@@Optimistas777 good luck copy pasting those 8+3 pics and thousands of lines of code. I had to rewatch this video 30 times and still can't get to that exact part that he's showing at the end.
@Optimistas7773 жыл бұрын
@@klauseba this video spreads the culture of copy pasting other people's code, so here I'm just raising the question of where would be the legal, ethical and practical limits of that. In this example, graphics and animations often are a complete piece of work, which may require creativity. Also it's super easy to prove stolen work as well, as each animation and graphic is super unique as opposed to just code
@klauseba3 жыл бұрын
@@Optimistas777 idk I never worked as a programmer. Maybe google the topic but I've never heard of such issues only in case someone worked on a government project. Why would there be dev tools inside the browsers if it would be illegal? Why would ppl share their code on github if it's illegal.
@Optimistas7773 жыл бұрын
@@klauseba yea, i have not heard either, but it's likely that it's hard to find and prove stolen code, and most don't care anyway. Regarding the legality of devtools. It's similar to a chef's knife - most professionals use it for the right things, and even if some ppl use it for illegal things, the knife itself is still legal to get, to have etc. Regarding github, the rules are defined by licenses attached to the code. Having no licence attached means the default github license applies, to which all parties agreed when creating accounts. But basically the default license means that you cant use, modify, redistribute the code, only view it :)) but yeah nobody listens to it, in real world I'm not a lawyer, not a legal advice, tho
@ninjaasmoke3 жыл бұрын
This guy just solved css
@Jdbluesky2 жыл бұрын
You are amazing!
@matthewao3 жыл бұрын
This is so big brain
@goat37603 жыл бұрын
the video is soo goood but too short
@littledovecitydust22 күн бұрын
now you just record the screen and ask Claude to write the CSS code.
@jaroslavhuss78133 жыл бұрын
I really want to see this guy in some coding challenge ("Can it be done with react native is doing it now") against other youtube developers. I truly believe he would rule them all.