Reverse Engineer CSS Animations

[@fgsaldanha]

Pro tip for advanced programmers: use Ctrl + C and Ctrl + V

[@Fireship]

Good call, I wanted to keep this more beginner friendly with right + click

[@nowifi4u]

That feel when Ctrl+C and Ctrl+V are not beginner friendly :P

[@aquual1462]

@@Fireship lets not forget the mac users :)

[@arafatzahan2082]

But it's not cross platform solution.

[@zyansheep]

@@dixztube yeeeeee I wish I was good at vim, but its just so slow for me

[@rubenforner]

"Animate like a pro by right click copy and paste " loved that ❤️

[@poujhit]

Lol ya🔥

[@tanmay______]

“If you steal something, make it better”

[@PajamaPalace]

Stack overflow would be proud

[@nap2t3r]

That was priceless

[@husseinkassem494]

Thats actually how it works

[@robhartle1849]

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]

You mean the right-click pro tip? :-D

[@Kevin-jc1fx]

@@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]

@@Kevin-jc1fx No they use v and p

[@sodiboo]

@@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]

- Why should we hire you? - Look at these fancy animations...

[@elementiro]

- Why should we hire you? - I can copy and paste...

[@Eldalion99999]

you are joking, but I got legit aproached by a company cuz of this reason

[@radwl]

- Hired

[@diegoalvarez437]

@@elementiro I know how to vs I can is the huge difference 🤣🤣

[@CodeHemu]

Csssss Csssss Csssss Csssss Csssss Csssss Csssss Csssss Csssss Csssss Csssss Csssss Csssss Csssss Csssss Csssss Csssss Csssss Csssss Csssss

[@FalseDev]

The ending about copy pasting was smooth

[@Optimistas777]

but serious, isn't copy pasting other people's code a copyright infringement?

[@Nicistarful]

@@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]

@@Optimistas777 kind of, no one will notice that

[@Optimistas777]

@@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]

@@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]

This is the best CSS tutorial I've ever seen

[@CST1992]

😆

[@mike22273]

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]

Can you please explain how this works for backend and database?

[@mike22273]

@@jerrythefilmmaker8229it’s copying, like pinching any logic off of stack overflow

[@verified_tinker1818]

jokes on you, my boss pays me for this

[@febrilian]

Me, a backend developer: "Hmm interesting 🤔"

[@stackoverflow2155]

Hacker : **slaps website backend with payloads** Hacker : This bad boy can fit so many vulnerabilities.

[@MM-vr8rj]

@@stackoverflow2155 BURP

[@emperorreload]

@@MM-vr8rj Suite

[@kushpatel6567]

Is it only me as a backend developer who thinks css is way more harder than beckend?

[@pizzamon4990]

​@@kushpatel6567 no its just more boring

[@madloop3217]

“Good artists borrow, great artists steal.”

[@Optimistas777]

but serious, isn't copy pasting other people's code a copyright infringement?

[@caparazo3488]

@@Optimistas777 I think it might get too complicated since they're CSS properties.

[@Linkeshvaranrr]

@@caparazo3488 😼

[@user-zi8lg5qu1h]

@@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]

@@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]

Now I can do fancy animations in less than 38 seconds. Got'em!

[@fikrad0]

Last step don't tell your friends you copy and past : trust me 😅

[@realSeyitan]

True. Also, it'll be a good idea to understand the code.

[@codiumyt]

past?

[@lucadelauw9039]

@@codiumyt pasta

[@silverzero9524]

they know

[@bogota2464]

If you do that **once** they’ll say you copy-pasted everything from now on lmao

[@mukeshwarvarma9957]

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]

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]

@@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]

​@@mukeshwarvarma9957 it was meant to be

[@RobertBrunhage]

The pasting part is my favourite 😎

[@sauravadhikari8645]

Well, I am sure that, one of the requirements to be a developer is to have great deal of experience in copy pasting.

[@dablulite]

I cannot even begin to describe how useful this is to me, I've been looking for something like this for months

[@Calupp]

Literally the only shorts I've ever "liked" Please keep these coming

[@daniel_q40]

Dude... the freaking animation panel indeed exists, crazy. Been looking for something like that for a long time

[@TheEpicFace007]

I love your sense of humor

[@Fireship]

I wasn't joking

[@jaydstone]

​@@Fireship 💀

[@tonymasse3887]

Freaking hilarious! 😂 Yet super informative, I didn't know about the Animation Panel in Dev Tools. Awesome.

[@blackerhawk1508]

For me, was awesome to discover the code coverage one

[@zidaanhayat4286]

Kudos to the most accurate web dev tutorials known to the internet

[@iAmPerflexed]

**copy pasted fancy CSS animations** Hiring manager: "ooh spangly things 🤩 you're hired."

[@11vag]

Man, these shorts are fireeeee. I love the sense of humor of this dude.

[@sauravadhikari8645]

Keep up with these short vertical videos, they are awessome. Your works really makes the day.

[@alirahmani5601]

I love these new #Short stuff.

[@rmoyni3]

All these shorts’ endings are fantastic 😂

[@MM-vr8rj]

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]

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]

Student who only knows C/C++: hmm yes interesting.

[@KastanDay]

This was very well made. Probably took forever to put together.

[@snopz]

We need a video on how to know where the random values in the requests comes from / made

[@mrbjjackson]

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]

I Love that pro Tipp at the end 😂😂

[@piotrszewczyk9749]

Oh man :) You're gold. You poses every single virtue ideal engineer should have: Precision, practicality and darn good sense of humor.

[@madannikalje760]

Thanks man that's life changing

[@morshedulislamriaad6496]

That's awesome. Can you do a full project?

[@numonamir9145]

He has very clear voice to train someone

[@alienfunbug]

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]

Damn those right click tricks are so good : D

[@noumanshah4275]

That force state saved my life

[@user-zo2ky4mz7d]

I was literally just thinking about this this morning. Thank you for this. Although short, but it's gold. 🔥

[@marufhassan634]

Expert devs and designer taking months to create flawless animation . . Me- Copy paste goes brrrrrrrrr

[@contactdi8426]

LOL 🤣🤣🤣 Copy Paste goes brrrrr...

[@klauseba]

just like China

[@lycan2494]

LMFAOOO

[@ianbdb7686]

Must be from sneaker twitter

[@basdfgwe]

Nice love these type of vids.

[@cesarmurillo6192]

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]

Bro this is a time saverrr

[@baobuiquang9743]

I don't know why but I find this video both helpful and funny at the same time

[@Ainigma]

Didnt know about the animation panel. Sweet!

[@RaabtaClothing]

There's also an AOS library for that, it animates on scroll.

[@neo7648]

So much info in so little time 👍👍

[@zhuolintsai9030]

The last step. Thought we didn't notice. But we did.

[@ThomasConover]

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]

This guy adds too much value to us We must protect him at all costs... I repeat at all costs

[@FalseDev]

Me a backend developer watching this anyways:

[@abdullahatif7854]

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__]

Great tip. Will definitely use this to center my content

[@BukanReviewBR]

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]

It’s an AI voice

[@self-interest.]

Honestly the best advice you can give because these days companies want you have unimaginable skills

[@shivensaini3643]

Trait of good developer : Knows what to copy and paste, Simple!

[@maximotejedapozo9335]

I love all these pro tips.

[@realSeyitan]

"like a pro, right click copy and like a pro right click paste". Professional advice to become a pro

[@tjmarx]

Today I learned web developers have friends.

[@kuntaldas2843]

I think it existed in Fire-fox long before it came to chrome Dev tools.

[@AbhinavKulshreshtha]

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]

Best channel in youtube no cap

[@Atanepes]

Yoo , thats a neat . 👌 thanks i need more of dev tools tips secrets

[@AToubar1]

For mac users, CTRL + SHIFT + P opens up the Command Menu.

[@not.yet.famous9418]

First Flagship vid I ever saw I fell in love 😍

[@ethereal41]

Wasn't expecting true and bartelby here ever

[@itzmeB2]

When ur early but don't know anything funny

[@Fireship]

Gold! 🥇

[@adarshkumar-jw2nz]

@B2 medal passed down to you. 🏅

[@itzmeB2]

@@Fireship thanks for the vid bro. I didn't know that Google Chrome developer tools had that much animation visualization tools

[@rul1175]

This is the cheat code for every design.

[@SargentPDA]

I feel that most people won't appreciate the True wow in the beginning

[@MobiusCoin]

Nothing more pro than Ctrl + C, Ctrl + V

[@SoulDragonXI]

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]

I love you, man.

[@ninjaasmoke]

This guy just solved css

[@maksym.koshovyi]

Two most powerful shortcuts: Ctrl+C + Ctrl+V

[@Jdbluesky]

You are amazing!

[@troyfitz1638]

Needed this Google algorithm doing work!

[@paulodetarsonr3140]

useful for me since im focused on back end and not front

[@JohnCarloCahimat]

man you're exposing my secrets

[@Adomas_B]

Great! Now I just need programming friends. Can you make a video "social life in 100 seconds"?

[@milodevs]

Remember Ctrl C Ctrl V is faster that doing it yourself from scratch

[@coolemur976]

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]

I never considered myself a pro until today.

[@ObinnaWGMI]

0:00 I love the fact he put flutter in the meme

[@steamcode4441]

Amazing vid, I don't know if I'm advanced enough to understand it yet though :)

[@Peter-rm7io]

wow thanks for teaching the trick

[@DaggieBlanqx]

Wow! You are a gem, developers we must protect this guy at all costs! Haha

[@spg6380]

You're like sorcerer Supreme of web development.

[@Rundik]

The good old copy paste technique never lets down

[@Wenlu_]

Today I just learned what "reverse engineering" means

[@eli_chaps]

Thanks man 👍

[@jaroslavhuss7813]

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]

Brilliant mate

[@kartikeyvhebbar]

Front end: Reverse Engineering Backend: copy - paste

[@drtechnology5807]

Only if I knew this earlier when I had my assignment for designing my own website from html and css

[@matteozhang7140]

So genius, yet our hero

[@berakoc8556]

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]

Thanks Man

[@pritamhalder5962]

this is what we call a PRO - Grammer move 😂

[@devnol]

"Hippity Hoppity, your code is now my property" - Dani, 2019

[@Optimistas777]

but serious, isn't copy pasting other people's code a copyright infringement?

[@klauseba]

@@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]

@@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]

@@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]

@@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]

I feel personally attacked.