Reverse Engineer CSS Animations

  Рет қаралды 1,685,853

Fireship

Fireship

Күн бұрын

Пікірлер: 581
@fgsaldanha
@fgsaldanha 3 жыл бұрын
Pro tip for advanced programmers: use Ctrl + C and Ctrl + V
@Fireship
@Fireship 3 жыл бұрын
Good call, I wanted to keep this more beginner friendly with right + click
@nowifi4u
@nowifi4u 3 жыл бұрын
That feel when Ctrl+C and Ctrl+V are not beginner friendly :P
@aquual1462
@aquual1462 3 жыл бұрын
@@Fireship lets not forget the mac users :)
@arafatzahan2082
@arafatzahan2082 3 жыл бұрын
But it's not cross platform solution.
@zyansheep
@zyansheep 3 жыл бұрын
@@dixztube yeeeeee I wish I was good at vim, but its just so slow for me
@rubenforner
@rubenforner 3 жыл бұрын
"Animate like a pro by right click copy and paste " loved that ❤️
@poujhit
@poujhit 3 жыл бұрын
Lol ya🔥
@tanmay______
@tanmay______ 3 жыл бұрын
“If you steal something, make it better”
@PajamaPalace
@PajamaPalace 3 жыл бұрын
Stack overflow would be proud
@nap2t3r
@nap2t3r 3 жыл бұрын
That was priceless
@husseinkassem494
@husseinkassem494 3 жыл бұрын
Thats actually how it works
@robhartle1849
@robhartle1849 3 жыл бұрын
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!
@RobertWildling
@RobertWildling 3 жыл бұрын
You mean the right-click pro tip? :-D
@Kevin-jc1fx
@Kevin-jc1fx 3 жыл бұрын
@@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 😂
@troler7147
@troler7147 3 жыл бұрын
@@Kevin-jc1fx No they use v and p
@sodiboo
@sodiboo 2 жыл бұрын
@@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
@seasong7655
@seasong7655 3 жыл бұрын
- Why should we hire you? - Look at these fancy animations...
@elementiro
@elementiro 3 жыл бұрын
- Why should we hire you? - I can copy and paste...
@Eldalion99999
@Eldalion99999 3 жыл бұрын
you are joking, but I got legit aproached by a company cuz of this reason
@radwl
@radwl 3 жыл бұрын
- Hired
@diegoalvarez437
@diegoalvarez437 3 жыл бұрын
@@elementiro I know how to vs I can is the huge difference 🤣🤣
@CodeHemu
@CodeHemu 2 жыл бұрын
Csssss Csssss Csssss Csssss Csssss Csssss Csssss Csssss Csssss Csssss Csssss Csssss Csssss Csssss Csssss Csssss Csssss Csssss Csssss Csssss
@FalseDev
@FalseDev 3 жыл бұрын
The ending about copy pasting was smooth
@Optimistas777
@Optimistas777 3 жыл бұрын
but serious, isn't copy pasting other people's code a copyright infringement?
@Nicistarful
@Nicistarful 3 жыл бұрын
@@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.
@gnsf
@gnsf 3 жыл бұрын
@@Optimistas777 kind of, no one will notice that
@Optimistas777
@Optimistas777 3 жыл бұрын
@@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
@valerioharvey7289
@valerioharvey7289 7 ай бұрын
@@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
@catmankitty9504
@catmankitty9504 3 жыл бұрын
This is the best CSS tutorial I've ever seen
@CST1992
@CST1992 2 ай бұрын
😆
@mike22273
@mike22273 2 ай бұрын
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
@jerrythefilmmaker8229
@jerrythefilmmaker8229 Ай бұрын
Can you please explain how this works for backend and database?
@mike22273
@mike22273 Ай бұрын
@@jerrythefilmmaker8229it’s copying, like pinching any logic off of stack overflow
@verified_tinker1818
@verified_tinker1818 3 жыл бұрын
jokes on you, my boss pays me for this
@febrilian
@febrilian 3 жыл бұрын
Me, a backend developer: "Hmm interesting 🤔"
@stackoverflow2155
@stackoverflow2155 3 жыл бұрын
Hacker : **slaps website backend with payloads** Hacker : This bad boy can fit so many vulnerabilities.
@MM-vr8rj
@MM-vr8rj 3 жыл бұрын
@@stackoverflow2155 BURP
@emperorreload
@emperorreload 3 жыл бұрын
@@MM-vr8rj Suite
@kushpatel6567
@kushpatel6567 2 ай бұрын
Is it only me as a backend developer who thinks css is way more harder than beckend?
@pizzamon4990
@pizzamon4990 2 ай бұрын
​@@kushpatel6567 no its just more boring
@madloop3217
@madloop3217 3 жыл бұрын
“Good artists borrow, great artists steal.”
@Optimistas777
@Optimistas777 3 жыл бұрын
but serious, isn't copy pasting other people's code a copyright infringement?
@caparazo3488
@caparazo3488 3 жыл бұрын
@@Optimistas777 I think it might get too complicated since they're CSS properties.
@Linkeshvaranrr
@Linkeshvaranrr 3 жыл бұрын
@@caparazo3488 😼
@user-zi8lg5qu1h
@user-zi8lg5qu1h 3 жыл бұрын
@@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.
@MrDyln
@MrDyln 2 жыл бұрын
@@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!
@ThiagoVieira91
@ThiagoVieira91 3 жыл бұрын
Now I can do fancy animations in less than 38 seconds. Got'em!
@fikrad0
@fikrad0 3 жыл бұрын
Last step don't tell your friends you copy and past : trust me 😅
@realSeyitan
@realSeyitan 3 жыл бұрын
True. Also, it'll be a good idea to understand the code.
@codiumyt
@codiumyt 3 жыл бұрын
past?
@lucadelauw9039
@lucadelauw9039 3 жыл бұрын
@@codiumyt pasta
@silverzero9524
@silverzero9524 3 жыл бұрын
they know
@bogota2464
@bogota2464 3 жыл бұрын
If you do that **once** they’ll say you copy-pasted everything from now on lmao
@mukeshwarvarma9957
@mukeshwarvarma9957 3 жыл бұрын
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 🤔😯
@klauseba
@klauseba 3 жыл бұрын
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.
@mukeshwarvarma9957
@mukeshwarvarma9957 3 жыл бұрын
@@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*
@adot3210
@adot3210 3 ай бұрын
​@@mukeshwarvarma9957 it was meant to be
@RobertBrunhage
@RobertBrunhage 3 жыл бұрын
The pasting part is my favourite 😎
@sauravadhikari8645
@sauravadhikari8645 3 жыл бұрын
Well, I am sure that, one of the requirements to be a developer is to have great deal of experience in copy pasting.
@dablulite
@dablulite 2 ай бұрын
I cannot even begin to describe how useful this is to me, I've been looking for something like this for months
@Calupp
@Calupp 3 жыл бұрын
Literally the only shorts I've ever "liked" Please keep these coming
@daniel_q40
@daniel_q40 2 жыл бұрын
Dude... the freaking animation panel indeed exists, crazy. Been looking for something like that for a long time
@TheEpicFace007
@TheEpicFace007 3 жыл бұрын
I love your sense of humor
@Fireship
@Fireship 3 жыл бұрын
I wasn't joking
@jaydstone
@jaydstone 2 ай бұрын
​@@Fireship 💀
@tonymasse3887
@tonymasse3887 3 жыл бұрын
Freaking hilarious! 😂 Yet super informative, I didn't know about the Animation Panel in Dev Tools. Awesome.
@blackerhawk1508
@blackerhawk1508 2 жыл бұрын
For me, was awesome to discover the code coverage one
@zidaanhayat4286
@zidaanhayat4286 3 жыл бұрын
Kudos to the most accurate web dev tutorials known to the internet
@iAmPerflexed
@iAmPerflexed Жыл бұрын
**copy pasted fancy CSS animations** Hiring manager: "ooh spangly things 🤩 you're hired."
@11vag
@11vag 3 жыл бұрын
Man, these shorts are fireeeee. I love the sense of humor of this dude.
@sauravadhikari8645
@sauravadhikari8645 3 жыл бұрын
Keep up with these short vertical videos, they are awessome. Your works really makes the day.
@alirahmani5601
@alirahmani5601 3 жыл бұрын
I love these new #Short stuff.
@rmoyni3
@rmoyni3 3 жыл бұрын
All these shorts’ endings are fantastic 😂
@MM-vr8rj
@MM-vr8rj 3 жыл бұрын
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)
@AyushSharma-id3ld
@AyushSharma-id3ld 3 жыл бұрын
0:14 Ctrl + Shift + P. But Great content as always. Your tutorials greatly improved the quality of my project. Keep up the good work.
@brianalpert1786
@brianalpert1786 3 жыл бұрын
Student who only knows C/C++: hmm yes interesting.
@KastanDay
@KastanDay 3 жыл бұрын
This was very well made. Probably took forever to put together.
@snopz
@snopz 3 ай бұрын
We need a video on how to know where the random values in the requests comes from / made
@mrbjjackson
@mrbjjackson 3 жыл бұрын
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!
@aloblanko
@aloblanko Жыл бұрын
I Love that pro Tipp at the end 😂😂
@piotrszewczyk9749
@piotrszewczyk9749 3 жыл бұрын
Oh man :) You're gold. You poses every single virtue ideal engineer should have: Precision, practicality and darn good sense of humor.
@madannikalje760
@madannikalje760 3 жыл бұрын
Thanks man that's life changing
@morshedulislamriaad6496
@morshedulislamriaad6496 3 жыл бұрын
That's awesome. Can you do a full project?
@numonamir9145
@numonamir9145 3 жыл бұрын
He has very clear voice to train someone
@alienfunbug
@alienfunbug 2 жыл бұрын
I can’t upvote this enough!!!! Blazing fast storefront with optimized ui/ux: cool. Parallax scroll five raw images: OMG YOU ARE A GOD!
@ziaahmad8738
@ziaahmad8738 3 жыл бұрын
Damn those right click tricks are so good : D
@noumanshah4275
@noumanshah4275 3 жыл бұрын
That force state saved my life
@user-zo2ky4mz7d
@user-zo2ky4mz7d 3 жыл бұрын
I was literally just thinking about this this morning. Thank you for this. Although short, but it's gold. 🔥
@marufhassan634
@marufhassan634 3 жыл бұрын
Expert devs and designer taking months to create flawless animation . . Me- Copy paste goes brrrrrrrrr
@contactdi8426
@contactdi8426 3 жыл бұрын
LOL 🤣🤣🤣 Copy Paste goes brrrrr...
@klauseba
@klauseba 3 жыл бұрын
just like China
@lycan2494
@lycan2494 3 жыл бұрын
LMFAOOO
@ianbdb7686
@ianbdb7686 3 жыл бұрын
Must be from sneaker twitter
@basdfgwe
@basdfgwe 3 жыл бұрын
Nice love these type of vids.
@cesarmurillo6192
@cesarmurillo6192 3 жыл бұрын
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!
@azatecas
@azatecas 3 жыл бұрын
Bro this is a time saverrr
@baobuiquang9743
@baobuiquang9743 3 жыл бұрын
I don't know why but I find this video both helpful and funny at the same time
@Ainigma
@Ainigma 3 жыл бұрын
Didnt know about the animation panel. Sweet!
@RaabtaClothing
@RaabtaClothing 2 ай бұрын
There's also an AOS library for that, it animates on scroll.
@neo7648
@neo7648 3 жыл бұрын
So much info in so little time 👍👍
@zhuolintsai9030
@zhuolintsai9030 3 жыл бұрын
The last step. Thought we didn't notice. But we did.
@ThomasConover
@ThomasConover 2 ай бұрын
Bro is flexing his reverse engineering skills in the face of noobs without pissing them off. That’s a pretty impressive skill in itself.
@wanjohi
@wanjohi 2 жыл бұрын
This guy adds too much value to us We must protect him at all costs... I repeat at all costs
@FalseDev
@FalseDev 3 жыл бұрын
Me a backend developer watching this anyways:
@abdullahatif7854
@abdullahatif7854 3 ай бұрын
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
@spirits__
@spirits__ 3 жыл бұрын
Great tip. Will definitely use this to center my content
@BukanReviewBR
@BukanReviewBR 3 жыл бұрын
I'm new to this channel. This guy's tone is always serious so I can't tell if he's serious or joking
@mondazeBS
@mondazeBS 10 ай бұрын
It’s an AI voice
@self-interest.
@self-interest. 2 ай бұрын
Honestly the best advice you can give because these days companies want you have unimaginable skills
@shivensaini3643
@shivensaini3643 3 жыл бұрын
Trait of good developer : Knows what to copy and paste, Simple!
@maximotejedapozo9335
@maximotejedapozo9335 3 жыл бұрын
I love all these pro tips.
@realSeyitan
@realSeyitan 3 жыл бұрын
"like a pro, right click copy and like a pro right click paste". Professional advice to become a pro
@tjmarx
@tjmarx 2 ай бұрын
Today I learned web developers have friends.
@kuntaldas2843
@kuntaldas2843 3 жыл бұрын
I think it existed in Fire-fox long before it came to chrome Dev tools.
@AbhinavKulshreshtha
@AbhinavKulshreshtha 3 жыл бұрын
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.
@cristianmartin3706
@cristianmartin3706 3 жыл бұрын
Best channel in youtube no cap
@Atanepes
@Atanepes 3 ай бұрын
Yoo , thats a neat . 👌 thanks i need more of dev tools tips secrets
@AToubar1
@AToubar1 3 жыл бұрын
For mac users, CTRL + SHIFT + P opens up the Command Menu.
@not.yet.famous9418
@not.yet.famous9418 3 жыл бұрын
First Flagship vid I ever saw I fell in love 😍
@ethereal41
@ethereal41 2 ай бұрын
Wasn't expecting true and bartelby here ever
@itzmeB2
@itzmeB2 3 жыл бұрын
When ur early but don't know anything funny
@Fireship
@Fireship 3 жыл бұрын
Gold! 🥇
@adarshkumar-jw2nz
@adarshkumar-jw2nz 3 жыл бұрын
@B2 medal passed down to you. 🏅
@itzmeB2
@itzmeB2 3 жыл бұрын
@@Fireship thanks for the vid bro. I didn't know that Google Chrome developer tools had that much animation visualization tools
@rul1175
@rul1175 2 ай бұрын
This is the cheat code for every design.
@SargentPDA
@SargentPDA 2 жыл бұрын
I feel that most people won't appreciate the True wow in the beginning
@MobiusCoin
@MobiusCoin 3 жыл бұрын
Nothing more pro than Ctrl + C, Ctrl + V
@SoulDragonXI
@SoulDragonXI 3 жыл бұрын
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.
@cuy4z
@cuy4z 2 жыл бұрын
I love you, man.
@ninjaasmoke
@ninjaasmoke 3 жыл бұрын
This guy just solved css
@maksym.koshovyi
@maksym.koshovyi 3 жыл бұрын
Two most powerful shortcuts: Ctrl+C + Ctrl+V
@Jdbluesky
@Jdbluesky 3 жыл бұрын
You are amazing!
@troyfitz1638
@troyfitz1638 2 жыл бұрын
Needed this Google algorithm doing work!
@paulodetarsonr3140
@paulodetarsonr3140 3 жыл бұрын
useful for me since im focused on back end and not front
@JohnCarloCahimat
@JohnCarloCahimat 2 жыл бұрын
man you're exposing my secrets
@Adomas_B
@Adomas_B 2 жыл бұрын
Great! Now I just need programming friends. Can you make a video "social life in 100 seconds"?
@milodevs
@milodevs 2 ай бұрын
Remember Ctrl C Ctrl V is faster that doing it yourself from scratch
@coolemur976
@coolemur976 3 жыл бұрын
This might help you to copy primitive animations, but not the advanced ones. I mean, what about JS based animations that are not profiled using dev tools animation recorder? Also, what about animations that has multiple steps (JS promises...), not just simple hover, reveal effects?
@joblessboy7030
@joblessboy7030 3 жыл бұрын
I never considered myself a pro until today.
@ObinnaWGMI
@ObinnaWGMI 3 жыл бұрын
0:00 I love the fact he put flutter in the meme
@steamcode4441
@steamcode4441 2 жыл бұрын
Amazing vid, I don't know if I'm advanced enough to understand it yet though :)
@Peter-rm7io
@Peter-rm7io Ай бұрын
wow thanks for teaching the trick
@DaggieBlanqx
@DaggieBlanqx 3 жыл бұрын
Wow! You are a gem, developers we must protect this guy at all costs! Haha
@spg6380
@spg6380 3 жыл бұрын
You're like sorcerer Supreme of web development.
@Rundik
@Rundik 3 жыл бұрын
The good old copy paste technique never lets down
@Wenlu_
@Wenlu_ 3 жыл бұрын
Today I just learned what "reverse engineering" means
@eli_chaps
@eli_chaps Жыл бұрын
Thanks man 👍
@jaroslavhuss7813
@jaroslavhuss7813 3 жыл бұрын
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.
@brettkruskie
@brettkruskie 2 жыл бұрын
Brilliant mate
@kartikeyvhebbar
@kartikeyvhebbar 3 жыл бұрын
Front end: Reverse Engineering Backend: copy - paste
@drtechnology5807
@drtechnology5807 2 жыл бұрын
Only if I knew this earlier when I had my assignment for designing my own website from html and css
@matteozhang7140
@matteozhang7140 3 жыл бұрын
So genius, yet our hero
@berakoc8556
@berakoc8556 3 жыл бұрын
You are like a Jesus of developers or something man :D Jokes aside those videos broaden my horizon and I am thankful for that.
@mihirkrishna
@mihirkrishna 2 ай бұрын
Thanks Man
@pritamhalder5962
@pritamhalder5962 3 жыл бұрын
this is what we call a PRO - Grammer move 😂
@devnol
@devnol 3 жыл бұрын
"Hippity Hoppity, your code is now my property" - Dani, 2019
@Optimistas777
@Optimistas777 3 жыл бұрын
but serious, isn't copy pasting other people's code a copyright infringement?
@klauseba
@klauseba 3 жыл бұрын
@@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.
@Optimistas777
@Optimistas777 3 жыл бұрын
@@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
@klauseba
@klauseba 3 жыл бұрын
@@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.
@Optimistas777
@Optimistas777 3 жыл бұрын
@@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
@rastapoi
@rastapoi 3 жыл бұрын
I feel personally attacked.
Award Winning Animation With Only 20 Lines Of CSS?
6:59
Hyperplexed
Рет қаралды 1,8 МЛН
"Hello, World" in 5 CURSED languages that no one should use
13:08
Dreams of Code
Рет қаралды 549 М.
兔子姐姐最终逃走了吗?#小丑#兔子警官#家庭
00:58
小蚂蚁和小宇宙
Рет қаралды 13 МЛН
Миллионер | 2 - серия
16:04
Million Show
Рет қаралды 1,8 МЛН
How to whistle ?? 😱😱
00:31
Tibo InShape
Рет қаралды 22 МЛН
The most dystopian app ever made…
4:54
Fireship
Рет қаралды 957 М.
I Redesigned the ENTIRE Spotify UI from Scratch
19:27
Juxtopposed
Рет қаралды 1,6 МЛН
Why You Shouldn't Nest Your Code
8:30
CodeAesthetic
Рет қаралды 2,8 МЛН
The WordPress ecosystem has lost its mind…
7:06
Fireship
Рет қаралды 875 М.
How Google's Chromium Took Over the Browser World
9:59
Eric Murphy
Рет қаралды 344 М.
The Unreasonable Effectiveness of Linux Workstations
12:47
No Boilerplate
Рет қаралды 637 М.
How is this Website so fast!?
13:39
Wes Bos
Рет қаралды 712 М.
C++ Developer Learns Python
9:26
PolyMars
Рет қаралды 2,7 МЛН
Hackers are destroying the Internet's history book right now
4:22
Fireship
Рет қаралды 1,7 МЛН
Future smartphone😀#youtubeshorts #smartphone #unboxing
0:24
E Zone
Рет қаралды 4,1 МЛН
Get your battery storage box
0:14
Nikola Toy
Рет қаралды 15 МЛН
Diode
0:16
ZS Electrical Work
Рет қаралды 2,7 МЛН