Use the Chrome browser's animation dev tools to record, analyze, and reverse engineer CSS animations. #css #webdev #shorts Official docs developer.chro...
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!
@@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
@@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.
@@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
@@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.
@@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!
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
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 🤔😯
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)
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!
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!
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.
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.
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
Hey man, are you secretly watching me 👀? Anytime you post, it’s always something that I’m currently working on. It’s suspicious. Jokes aside, love your videos. Great content!
Pro tip for advanced programmers: use Ctrl + C and Ctrl + V
Good call, I wanted to keep this more beginner friendly with right + click
That feel when Ctrl+C and Ctrl+V are not beginner friendly :P
@@Fireship lets not forget the mac users :)
But it's not cross platform solution.
@@dixztube yeeeeee I wish I was good at vim, but its just so slow for me
"Animate like a pro by right click copy and paste " loved that ❤️
Lol ya🔥
“If you steal something, make it better”
Stack overflow would be proud
That was priceless
Thats actually how it works
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!
You mean the right-click pro tip? :-D
@@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 😂
@@Kevin-jc1fx No they use v and p
@@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
- Why should we hire you?
- Look at these fancy animations...
- Why should we hire you?
- I can copy and paste...
you are joking, but I got legit aproached by a company cuz of this reason
- Hired
@@elementiro I know how to vs I can is the huge difference 🤣🤣
Csssss Csssss Csssss Csssss Csssss Csssss Csssss Csssss Csssss Csssss Csssss Csssss Csssss Csssss Csssss Csssss Csssss Csssss Csssss Csssss
This is the best CSS tutorial I've ever seen
😆
jokes on you, my boss pays me for this
The ending about copy pasting was smooth
but serious, isn't copy pasting other people's code a copyright infringement?
@@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.
@@Optimistas777 kind of, no one will notice that
@@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
@@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
“Good artists borrow, great artists steal.”
but serious, isn't copy pasting other people's code a copyright infringement?
@@Optimistas777 I think it might get too complicated since they're CSS properties.
@@caparazo3488 😼
@@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.
@@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!
Me, a backend developer:
"Hmm interesting 🤔"
Hacker : **slaps website backend with payloads**
Hacker : This bad boy can fit so many vulnerabilities.
@@stackoverflow2155 BURP
@@MM-vr8rj Suite
Is it only me as a backend developer who thinks css is way more harder than beckend?
@@kushpatel6567 no its just more boring
Last step don't tell your friends you copy and past : trust me 😅
True. Also, it'll be a good idea to understand the code.
past?
@@codiumyt pasta
they know
If you do that **once** they’ll say you copy-pasted everything from now on lmao
The pasting part is my favourite 😎
Well, I am sure that, one of the requirements to be a developer is to have great deal of experience in copy pasting.
Now I can do fancy animations in less than 38 seconds. Got'em!
I cannot even begin to describe how useful this is to me, I've been looking for something like this for months
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
**copy pasted fancy CSS animations**
Hiring manager: "ooh spangly things 🤩 you're hired."
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 🤔😯
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.
@@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*
@@mukeshwarvarma9957 it was meant to be
Freaking hilarious! 😂
Yet super informative, I didn't know about the Animation Panel in Dev Tools. Awesome.
For me, was awesome to discover the code coverage one
Literally the only shorts I've ever "liked" Please keep these coming
All these shorts’ endings are fantastic 😂
Keep up with these short vertical videos, they are awessome. Your works really makes the day.
Expert devs and designer taking months to create flawless animation
.
.
Me- Copy paste goes brrrrrrrrr
LOL 🤣🤣🤣 Copy Paste goes brrrrr...
just like China
LMFAOOO
Must be from sneaker twitter
Man, these shorts are fireeeee. I love the sense of humor of this dude.
I love your sense of humor
I wasn't joking
@@Fireship 💀
Dude... the freaking animation panel indeed exists, crazy.
Been looking for something like that for a long time
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)
We need a video on how to know where the random values in the requests comes from / made
Kudos to the most accurate web dev tutorials known to the internet
This was very well made. Probably took forever to put together.
I love these new #Short stuff.
Bro is flexing his reverse engineering skills in the face of noobs without pissing them off. That’s a pretty impressive skill in itself.
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.
0:14 Ctrl + Shift + P. But Great content as always. Your tutorials greatly improved the quality of my project. Keep up the good work.
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!
Oh man :) You're gold. You poses every single virtue ideal engineer should have: Precision, practicality and darn good sense of humor.
I was literally just thinking about this this morning. Thank you for this. Although short, but it's gold. 🔥
Me a backend developer watching this anyways:
I Love that pro Tipp at the end 😂😂
Student who only knows C/C++: hmm yes interesting.
Damn those right click tricks are so good : D
Honestly the best advice you can give because these days companies want you have unimaginable skills
Bro this is a time saverrr
Didnt know about the animation panel. Sweet!
There's also an AOS library for that, it animates on scroll.
I can’t upvote this enough!!!! Blazing fast storefront with optimized ui/ux: cool. Parallax scroll five raw images: OMG YOU ARE A GOD!
That force state saved my life
0:00 I love the fact he put flutter in the meme
Thanks man that's life changing
He has very clear voice to train someone
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!
Nice love these type of vids.
That's awesome. Can you do a full project?
I think it existed in Fire-fox long before it came to chrome Dev tools.
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.
I don't know why but I find this video both helpful and funny at the same time
Wasn't expecting true and bartelby here ever
Yoo , thats a neat . 👌 thanks i need more of dev tools tips secrets
Great tip. Will definitely use this to center my content
Best channel in youtube no cap
You are amazing!
I love all these pro tips.
When ur early but don't know anything funny
Gold! 🥇
@B2 medal passed down to you. 🏅
@@Fireship thanks for the vid bro. I didn't know that Google Chrome developer tools had that much animation visualization tools
This guy adds too much value to us
We must protect him at all costs... I repeat at all costs
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.
This is the cheat code for every design.
"like a pro, right click copy and like a pro right click paste".
Professional advice to become a pro
Remember Ctrl C Ctrl V is faster that doing it yourself from scratch
I feel that most people won't appreciate the True wow in the beginning
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
I love you, man.
Needed this Google algorithm doing work!
Bro, literally what i do pretty much all the time.
Amazing vid, I don't know if I'm advanced enough to understand it yet though :)
First Flagship vid I ever saw
I fell in love 😍
So much info in so little time 👍👍
Today I learned web developers have friends.
I never considered myself a pro until today.
For mac users, CTRL + SHIFT + P opens up the Command Menu.
The last step. Thought we didn't notice. But we did.
Nothing more pro than Ctrl + C, Ctrl + V
useful for me since im focused on back end and not front
The good old copy paste technique never lets down
now you just record the screen and ask Claude to write the CSS code.
I showed my friends hello world... Guess who's a senior developer.
Didn't knew that ctrl + c and ctrl + v was the shortcut sequence for reverse engineering.
saving for future references
this is what we call a PRO - Grammer move 😂
Front end developers that write their own css are livid right now 😂
"boom! drop the mic" moment!
I'm new to this channel. This guy's tone is always serious so I can't tell if he's serious or joking
It’s an AI voice
Oh shit, I didn't know about this animation window :D
Only if I knew this earlier when I had my assignment for designing my own website from html and css
Trait of good developer : Knows what to copy and paste, Simple!
wow thanks for teaching the trick
Backend developers -- now I know how to center a div
man you're exposing my secrets
10 out of 10 would definitely recommend... just don't give away your magical secrets
"Thanks for the inspiration" I say as I copy a entire website
Front end: Reverse Engineering
Backend: copy - paste
Great! Now I just need programming friends. Can you make a video "social life in 100 seconds"?
This guy just solved css
Hey man, are you secretly watching me 👀?
Anytime you post, it’s always something that I’m currently working on. It’s suspicious.
Jokes aside, love your videos. Great content!