How to Make Beautiful Code Presentations

This video answers the most common question I get on my channel: how do I make my code animations / presentations? This video answers that question with a behind the scenes look at how I made the "From C ➡️ C++ ➡️ Rust" KZread video.
Links:
Final Video "From C ➡️ C++ ➡️ Rust": • From C ➡️ C++ ➡️ Rust
CodeAesthetic Video: • Why You Shouldn't Nest...
Chapters:
0:00 Intro
0:38 Three Things You Need
1:03 Morph Transition
2:23 VS Code
2:32 Material Theme
3:20 Making the Rest of the Video
8:37 Applying a Small Fix
9:36 Outro
Follow me on Github: github.com/codereport
Follow me on Twitter: / code_report
Follow me on LinkedIn: / codereport

Пікірлер: 117

  • @TheDavidlloydjones
    @TheDavidlloydjones Жыл бұрын

    "This will probably be a ten-to-fifteen-minute video" he says at the beginning. Translation: "I haven't thought this thing through, let alone scripted or rehearsed it. I'm just going to sit here and yap off the top of my head and you all out there get to lap up my random wisdom."

  • @PriyadarshiPrashant

    @PriyadarshiPrashant

    Жыл бұрын

    Perfect translation

  • @maybeyesterday

    @maybeyesterday

    Жыл бұрын

    Bro can you put a morph transition on that translation pls?!

  • @PriyadarshiPrashant

    @PriyadarshiPrashant

    Жыл бұрын

    @@maybeyesterday even perfecto

  • @dhtoran1
    @dhtoran1 Жыл бұрын

    If you are changing one logo for another, just copy the new one, right-click in the old logo, “Change Image” -> “From Clipboard”. It maintains the size :-)

  • @rid9
    @rid9 Жыл бұрын

    For those wondering, Keynote does have this feature. It's a transition called "Magic Move" and it can match objects, words or characters.

  • @andrerenault

    @andrerenault

    Жыл бұрын

    It's had it for quite some time now, too. I remember playing with it in high school, and that was many moons ago.

  • @casperes0912

    @casperes0912

    Жыл бұрын

    In fact, Keynote had it first

  • @ko-Daegu

    @ko-Daegu

    Жыл бұрын

    @@casperes0912 what’s keynote ?

  • @PhilippeCarphin

    @PhilippeCarphin

    10 ай бұрын

    @@ko-Daegu It's Apple's PowerPoint.

  • @vintagewander
    @vintagewander Жыл бұрын

    I thought you use manim for this because it really has this manim transition style to it, and to my surprise I never thought powerpoint can do this, awesome video

  • @f4614n
    @f4614n Жыл бұрын

    This video motivated me to start out learning manim a bit. You can achieve more or less the same with the following code (assuming the embedded code is defined somewhere in string form under the variable names code_i and code_f): class CodeFromString(Scene): def construct(self): rendered_code_i = Code(code=code_i, tab_width=4, background="window", language="c++", font="Monospace") rendered_code_f = Code(code=code_f, tab_width=4, background="window", language="c++", font="Monospace") self.play(Create(rendered_code_i)) self.play(Transform(rendered_code_i, rendered_code_f)) self.wait()

  • @JosueRodriguez08

    @JosueRodriguez08

    Жыл бұрын

    Ohhhhhhhhh this is greaaaaaat. Really dislike depending on Microsoft for stuff, I'll give this a try.

  • @madhukiranattivilli2321
    @madhukiranattivilli2321 Жыл бұрын

    "One Dark" is a very attractive vs code theme I code in java. To illustrate the beauty of this theme... it gives different colors for : -- local variables (white) -- class level variables (orangish-red) -- method parameters and final local variables (light brown) -- keywords (violet) -- method names (sea blue) -- data types (mustard) …

  • @vaisakhkm783

    @vaisakhkm783

    Жыл бұрын

    you code in java means.... you already lost viewers because not everyone have wide screen monitors..... :)

  • @madhukiranattivilli2321

    @madhukiranattivilli2321

    Жыл бұрын

    @@vaisakhkm783 U seem to be confused. Check ur msg again I'm not the owner of this channel. I'm visitor, just like u.

  • @Mavhawk64

    @Mavhawk64

    Жыл бұрын

    @@madhukiranattivilli2321 they’re just trying to be mean. There are plenty of Java programmers in the world to have a good enough following on KZread.

  • @madhukiranattivilli2321

    @madhukiranattivilli2321

    Жыл бұрын

    @@Mavhawk64 I said "I code in java" coz "one dark" theme feels beautiful for a java program. This need not necessarily be true for any programming language

  • @madhukiranattivilli2321

    @madhukiranattivilli2321

    Жыл бұрын

    @@vaisakhkm783 I said "I code in java" coz "one dark" theme feels beautiful for a java program. This need not necessarily be true for any programming language

  • @RecursionIs
    @RecursionIs Жыл бұрын

    Morph transition 🔥

  • @Dogflamingo
    @Dogflamingo Жыл бұрын

    That morph transition goes hard 🔥🔥🔥

  • @centis4533
    @centis4533 Жыл бұрын

    You can be the brand ambassador of Microsoft Office suit... You provide the best example instead of the basic examples from Microsoft.

  • @rutabega306

    @rutabega306

    Жыл бұрын

    Seriously, I half considered buying a MS product haha

  • @ynchen
    @ynchen Жыл бұрын

    Didn't expect this to be this easy. This is great

  • @afmikasenpai
    @afmikasenpai Жыл бұрын

    Wow... I never knew I needed this. Great video as always !

  • @amirgamil
    @amirgamil Жыл бұрын

    That was awesome! Thanks for that. You, sir, are a master of your craft! 👏

  • @boukefmohamed3191
    @boukefmohamed3191 Жыл бұрын

    do you know i spent a week to searching for that !!! THANK YOUUU

  • @briandublidi4708
    @briandublidi4708 Жыл бұрын

    absolutely lovely :) gives me motivation to make my own programming videos

  • @bjmckenz
    @bjmckenz Жыл бұрын

    Thanks for leveling me up.

  • @lucasa8710
    @lucasa8710 Жыл бұрын

    I like this, pretty smart and concise

  • @husseinamini9026
    @husseinamini90265 ай бұрын

    Thanks man. I needed it sooo bad

  • @tangentstorm
    @tangentstorm Жыл бұрын

    That's pretty cool! I'm going to have to figure out how to make my presentation tool do this, but in the meantime I may give powerpoint a try for a particular refactoring/golfing video I've had on the back burner.

  • @CISMarinho
    @CISMarinho Жыл бұрын

    Great video! Really love it

  • @solitary_crow
    @solitary_crow Жыл бұрын

    You can generate slides using racket slideshow too. It's a DSL that can be used to make presentations using lisp.

  • @snk-js
    @snk-js Жыл бұрын

    this is freakin amazing and still very easy dude

  • @mikkolukas
    @mikkolukas Жыл бұрын

    Great, simple solution! :)

  • @DavesGarage
    @DavesGarage Жыл бұрын

    Thanks for sharing! I would not have guessed Powerpoint...

  • @devmahad
    @devmahad Жыл бұрын

    Thank you!!

  • @nro337
    @nro337 Жыл бұрын

    very cool!

  • @torarinvik4920
    @torarinvik4920 Жыл бұрын

    A magician revealing his secrets :D, merry christmas to all!

  • @phantuananh2163
    @phantuananh2163 Жыл бұрын

    Impressive!!!

  • @tsukigva6130
    @tsukigva6130 Жыл бұрын

    Thanks

  • @oscardasilva971
    @oscardasilva971 Жыл бұрын

    Thaaaaaaank you

  • @bzboii
    @bzboii Жыл бұрын

    I like how you changed the prev video to point the arrow from haskell back to rust as opposed to how you have it here with rust pointing to haskell

  • @code_report

    @code_report

    Жыл бұрын

    Wasn't sure anyone would notice that 😊 Great catch

  • @bzboii

    @bzboii

    Жыл бұрын

    @@code_report this is like your east west const slide trivias

  • @pmcgee003
    @pmcgee003 Жыл бұрын

    Conor's Canadian ... he apologises to powerpoint. 🙂

  • @code_report

    @code_report

    Жыл бұрын

    😂

  • @pawekoaczynski4505
    @pawekoaczynski4505 Жыл бұрын

    I had no idea this effect is so easy to create c:

  • @kamalmohamed6611
    @kamalmohamed6611 Жыл бұрын

    im gonna start a youtube channel 😀

  • @imxd9698
    @imxd9698 Жыл бұрын

    code went from a simple and easy to understand for loop to the most complex "clever" code I've seen in a while lol

  • @ji1046

    @ji1046

    Жыл бұрын

    I'm really hoping the refactoring is a joke or parody but it's probably not...

  • @liautraver3698
    @liautraver36985 ай бұрын

    i struggled a lot about morph transition in regarding to text but just does not find the `text` option which was built in. this was a KILLER for presentation.

  • @volshebnikozz
    @volshebnikozz Жыл бұрын

    Free online version of PowerPoint has these tools too. (Although UI is a bit different and not 100% of things are available online)

  • @avidrucker

    @avidrucker

    Жыл бұрын

    This is super useful to know, thanks!

  • @229ac88b

    @229ac88b

    Жыл бұрын

    This!! You can get some pretty decent mileage out of the free version of office, and most people don’t even know it exists.

  • @nirajkhatiwada6696

    @nirajkhatiwada6696

    Жыл бұрын

    Only problem is you cannot export as a video.

  • @Henry-mc5yq
    @Henry-mc5yq Жыл бұрын

    The real best programing language, PowerPoint

  • @Henry-mc5yq

    @Henry-mc5yq

    Жыл бұрын

    kzread.info/dash/bejne/kWeg0dNrYrfeg8Y.html

  • @ummnine6938
    @ummnine6938 Жыл бұрын

    i have asked a couple of people how do they make their vids, and no one cares to answer, but i didnt even ask here and a pleasant surprise to see a video on this topic, thanks a lot. Will you ever use Blender for transitions also?

  • @LesleyLai
    @LesleyLai Жыл бұрын

    I tried to find such a code-transition solution back in 2019 and I didn't even think about PowerPoint 😅

  • @kaporos

    @kaporos

    Жыл бұрын

    You can also check revealjs !

  • @bzboii
    @bzboii Жыл бұрын

    yessss

  • @damilolaowolabi9148
    @damilolaowolabi9148 Жыл бұрын

    What font are you using?

  • @RajeshPandianM
    @RajeshPandianM Жыл бұрын

    ❤❤

  • @goosydev
    @goosydev Жыл бұрын

    I absolutely love the morph effect, it makes for a great presentation. But I find it very dangerous when trying to make awesome presentations because its so easy to introduce too many elements and animations which makes your presentation visually complex and harder to digest. I think using the morph animation of a maximum of 3 big elements at a time is fine but when you are dealing with more elements you should think about splitting it apart bit by bit. Lets say you want to explain 5 lines of code then you could display only 1 line explain it then display another and so on. Then you can use the morph animation to make it cleaner. But don't forget about making your presentation simple cuz that's more important than the looks. You want that the audience understands what you are talking about and not just "be amazed" at your animation skills.

  • @ChaooCharles
    @ChaooCharles Жыл бұрын

    Awesome tip, thank you!

  • @adibhanna
    @adibhanna Жыл бұрын

    great videos! would love to know how you actually setup your recording tools. (res. and other things)

  • @code_report

    @code_report

    Жыл бұрын

    I just use OBS: obsproject.com/

  • @adibhanna

    @adibhanna

    Жыл бұрын

    @@code_report really! what monitor res do you use when recording these videos? 1080p?

  • @sammflynn6751
    @sammflynn6751 Жыл бұрын

    crazy

  • @snk-js
    @snk-js Жыл бұрын

    genius

  • @MartinMarcher
    @MartinMarcher Жыл бұрын

    Copy the logo, right click on image and then there’s an option to replace from clipboard

  • @dzaqwanamir
    @dzaqwanamir Жыл бұрын

    Great video! What font you use for vs code?

  • @code_report

    @code_report

    Жыл бұрын

    Consolas.

  • @watynecc3309
    @watynecc3309 Жыл бұрын

    can we do that in libreoffice ?

  • @wlockuz4467
    @wlockuz4467 Жыл бұрын

    Looks super elegant, just wondering how does your PowerPoint maintain the same syntax highlight as VSCode?

  • @abdellahcodes

    @abdellahcodes

    Жыл бұрын

    Vs code is an electron app, so technically you're copy pasting HTML from a browser not just plain text

  • @onebacon_

    @onebacon_

    Жыл бұрын

    I think there's some more magic happening behind the scenes, because if it was just html, than you could see that if you pasted it somewhere else. I think vs code saves some extra data to the clipboard when copying, that can be used by programs which support it and ignored by something expecting text.

  • @MartinJaniczek
    @MartinJaniczek Жыл бұрын

    "It does objects by default, but for code you typically need words." APL has entered the chat

  • @abrudz

    @abrudz

    Жыл бұрын

    Then you choose "Characters"…

  • @code_report

    @code_report

    Жыл бұрын

    😂

  • @peacemaker42069
    @peacemaker42069 Жыл бұрын

    How do you capture the video afterwards? is it just screen recording?

  • @code_report

    @code_report

    Жыл бұрын

    OBS

  • @vaisakhkm783
    @vaisakhkm783 Жыл бұрын

    i am wondering whether i can make a neovim plugin to show this :) ... you know, with git diffs

  • @mndtr0

    @mndtr0

    Жыл бұрын

    But neovim is console TUI application and text editor... is that plugin even possible?! This idea sounds more emacs'ish instead of neovim'ish

  • @SergeiKonov-xn5bz
    @SergeiKonov-xn5bz Жыл бұрын

    When I copy and paste it from vs code to powerpoint it keeps highlighting but totally ruins formatting. What can be wrong here?

  • @alpaslaneldemir6904
    @alpaslaneldemir6904 Жыл бұрын

    Also check RevealJS

  • @okefejoseph6825
    @okefejoseph6825Ай бұрын

    How do I get the logos?

  • @mohammadbasyouni7171
    @mohammadbasyouni7171 Жыл бұрын

    the first 21st min and the 21st like

  • @leofun01
    @leofun01 Жыл бұрын

    Wow. I didn't know that something similar exist in PowerPoint.

  • @definite_d
    @definite_d Жыл бұрын

    Instead of deleting images, I think there's a replace image option in the right click menu of images.

  • @Flutterful
    @Flutterful Жыл бұрын

    I have made Flutter videos on my channel and they look as good as the ones made by Flutter official channel. The only difference is that I used Powerpoint and they use After Effects.

  • @winteru388
    @winteru388 Жыл бұрын

    It doesn't copy the indent for me :/

  • @cariyaputta
    @cariyaputta Жыл бұрын

    It'd be great if you only use free and/or open-source tools. Microsoft PowerPoint won't cut it.

  • @mateoferretto2175

    @mateoferretto2175

    Жыл бұрын

    This is doable in PowerPoint online, which is free

  • @skeletonboxers7336
    @skeletonboxers7336 Жыл бұрын

    my sleep deprived self read this as "how to make pretentious code beautiful"

  • @fildaCZSK
    @fildaCZSK Жыл бұрын

    How to make beautiful code presentations 🤓🤓🤓🤓🤓🤓

  • @FlowerBoyWorld
    @FlowerBoyWorld Жыл бұрын

    wow it bugs me so much how you just put text boxes anywhere without reference points

  • @OldestJunior
    @OldestJunior Жыл бұрын

    What a great vid. Thank you. Do you have any recommendations on code fade ins like in this video kzread.info/dash/bejne/dXqGyqmnpbutXZc.html

  • @bzboii
    @bzboii Жыл бұрын

    1:50 *2019 or _later_!

  • @noqulee
    @noqulee Жыл бұрын

    Nice content, but your mic is clipping. Try compressor. Have a good one!

  • @kharthigeyan
    @kharthigeyan Жыл бұрын

    3Blue1Brown type of transitions, no need for python manim library

  • @leo848

    @leo848

    Жыл бұрын

    What do you mean by "no need for"? Manim is literally so much better than this proprietary program that costs 100$ per year.

  • @f4614n

    @f4614n

    Жыл бұрын

    @@leo848 I'd like to learn more about Manim - do you know how to achieve similar transitions like shown in this video using Manim? Edit: After scrolling a bit through the documentation, the closest I found are the classes in animation.transform_matching_parts for shapes and LaTeX on the animation side of things and manim.mobject.text.code_mobject.Code for code listings. Haven't tried it out yet but it currently doesn't look like a 1:1 equivalent. Edit 2: I figured out how to do this in manim (for a practical example see my other post). Its actually fairly simple and straight forward to do.

  • @xenten9686
    @xenten9686 Жыл бұрын

    I am disappointed in how possible it would be to automate this process and yet it is not done.

  • @metalosaur
    @metalosaur Жыл бұрын

    Wait, you don't use self-written presentations generator with code-based input? How dare you!

  • @voilin
    @voilin Жыл бұрын

    For the love of god don't make dark theme presentations please. It's fine too look at the monitor screen, but once you show it through the projector you will quickly realise that you can't see anything and neither the spectators

  • @InMemoryOfNeo
    @InMemoryOfNeo9 ай бұрын

    morph transition is good. so is there an animation similar to typeing instead of transition? for example there is a virtual cursor and powerpoint will write different codes when passing to another layer.

  • @leo848
    @leo848 Жыл бұрын

    I really like the videos and the style used, but I really don't think it's necessary to use proprietary software here. As far as I know, the free and open-source manim animation library by 3Blue1Brown includes a similar effect and automatically has syntax highlighting via pygments. This way, you don't have to rely on some software provided by a company that might, for whatever reason, remove a feature whenever they want. Another benefit is that the entire process can be automated - no need for manually moving code blocks to look more aesthetic, design an algorithm once and use it forever. You can also add post-render scripts like running every file to check if it compiles, format it beforehand and much more - the possibilities are really endless. Or even design a custom morph algorithm if manim's standard one doesn't feel right - again, PowerPoint might change at any point in time and you as a customer have no say in how. See the manim library here: github.com/manimcommunity/manim

  • @MartynPS

    @MartynPS

    Жыл бұрын

    Manim does have a similar effect, but coding from scratch is definitely not a 3 clicks and done process. As is often the case OS can probably do this better but not without investing some additional time and brainpower. As for PowerPoint changing at any time... I would expect the OS software to be more of a risk of changing - and then you have to maintain some older fork.

  • @leo848

    @leo848

    Жыл бұрын

    @@MartynPS > I would expect the OS software to be more of a risk of changing - and then you have to maintain some older fork Well yes, but at least you have the ability to. It's literally as easy as changing a number in a text file or bash command. With PowerPoint it might not even change, but be locked behind a paywall / further subscription / etc that we can't even think about now (as has happened in the past, when one-time-prices turned to subscriptions and you basically didn't own any software anymore). While writing an algorithm to do this work might be tedious and difficult, it is still a way to future-proof this way of presenting code and maybe even add more options - but it isn't even necessary if great libraries like manim exist that have animations, interpolation and syntax highlighting for free (so you don't even need Microsoft VS Code for it).

  • @MartynPS

    @MartynPS

    Жыл бұрын

    @@leo848 but it's a cost benefit or risk balance analysis right? If code_report spends some hours doing something now to achieve something he already has without overtly improving his product then no-one has gained anything - probably the opposite if it takes longer to achieve the final tweaks etc.

  • @ishwargowda
    @ishwargowda Жыл бұрын

    Thanks