Very bad idea, open source requires maintenance and is a massive headache, especially for someone as inexperienced as this guy. If it took him two weeks to build this, imagine how long it'd take him to get through dozens of PRs
@@daylen577 i wouldn't say it's a bad idea... if he is not going to commercialize it, it's just a matter of putting it in a github repo and slapping a mit license on it... he doesn't need to accept or even check any pull requests or fix issues... also, two weeks is impressive right? things i estimate to be completed in 2hour always takes 2 weeks....
Nice tool, thanks for releasing it! Found an edge case for you; since the diff only uses the plaintext rather than taking into account the syntax highlighting there is a scenario where the colour of a common token will change, e.g: `const x = test();` -> `const x = "test";` -- The word "test" jumps from yellow to red at the start of the transition. Interpolating the colour of each token as well as its position would solve this issue.
Thank you for sharing the process. As being in a similar position, creating products from scratch with same technology, it's a great feeling how others run through the processes. Well done.
Feedback: 1 - When the "Tab" key is pressed, it focuses on the "Preview" button instead of adding indentation. 2 - I noticed that sometimes code highlighting appears, so I assume you are using a "code editor" library (although, now I think it might have been the browser's language corrector... my mistake). Have you ever heard of "Monaco Editor"? (Probably yes, but it doesn't hurt to ask, right?) 3 - Perhaps consider implementing a resizable (code) window. Note: "Monaco Editor" allows for auto-formatting and auto-highlighting for multiple languages natively. It may also provide the option to add a "language picker" in the future. Congratulations for the app! I remember a few weeks ago when I asked about what you were using... I never imagined you would create a project like this! Best regars and good luck with your bachelor's thesis!
Can you do a video about unit testing? Like, if it is important or mostly time westing, for frontend or backend, because philosophicaly I don't know why the idea stub and mock make sense.
This tool is awesome!!! Imagine that teachers at school will start to using it, i think it would be faster than typing whole code infont of class and also students will understand the code better because the website is clean and minimalistic.
the algorithm looks like it could've easily been reproduced in python within 2 hours with word lists, splits, and such and since it's build frame by frame you could just make it exactly like an ordinary animation tool paste code in the first frame box, and hit new frame, the entire code would be automatically copied, so you just have to keep adding lines each frame and maybe play with a timer, speed, transition effect
@@TheIpicon thanks! interesting, which country are you from? For us here in Germany we have a thesis for both, though the masters is much longer and the scientific expectation much higher
Hey man, first of all, this is an awesome tool! But I was thinking, what about a color palete editor, to have our own text color choices, background color as well, maybe even a font changing possibility? It's kinda dope but there's only the same theme available. Thank you tho!
this def going to my bookmarks , p.s : can you make some parameters where you can change the speed of the animation and the size of the text and when you add a new slide it automatically copies and pastes the old slide(s content in it , thank you anyway for this great tool
Very very cool Josh! Things I'd like to see: All the config options like transition easing, duration, syntax highlighter/theme Also, it's unclear how to copy a slide so maybe a tutorial would be nice on the first visit?
Isn't better to do rendering in the client side right? So server expense will be reduced i am there are sure complied wasm ffmeg libraries are available
There's a lot of potential here. It would be nice if it was a stand alone app. Editing the code in the app is difficult. I have to edit in notepad and copy and paste it in. It would be nice if it supported other languages. Edit: Also animation duration and easing types would be good too.
Sooo the highlighting only works for JS? I really like the idea, had the plan to do that myself as well at some point but had no motivation, it looks really nice!
So amazing. The only problem is that i want to animate rust code and when i write "fn" instead of "function", even after changing the file extension, there is no syntax highlighting
What if we took keynote and produced a large dataset of animations on various code snippets. Run ocr on it to calculate positions and new positions. Then we use what the model generates and animate it?
why introduce AI into a field that does not need AI? If you're just curious how well it would perform, my prediction is pretty bad because tokenization needs to be exact, something LLMs are not great at
That's a pretty neat idea. But it doesn't work that well, some characters overlap and don't appear correctly. But I'll be definitely be using this if you fix these bugs. You should add some ads there to monetize this : )
Hello. Please add support for non Latin1 text in slides. Rn it fails on export if text is non english (for example comment written in Chinese) with error: Uncaught DOMException: Failed to execute 'btoa' on 'Window': The string to be encoded contains characters outside of the Latin1 range
can you make it so that you can set how many seconds a slide lasts because they go too fast and it would be really convenient if it were possible to do it
Pls help, how do you import and use google/diff-match-patch in your project ? have already try with CDN => Uncaught ReferenceError: diff_match_patch is not defined at HTMLDocument. With npm & import in my .js => Uncaught TypeError: Failed to resolve module specifier "diff-match-patch". Relative references must start with either "/", "./", or "../". I'm new dev, save me x)
Hi Josh, I absolutely love your videos mate. and I was interested in knowing if one was to reach out to you for professional purposes, what and how do they reach you
even my grandma said "josh this tool be bussin", what do y'all think?
you should try
Hömma, Joshi, deine App fährt mit'm Bus!
I do be bussin. Granny ain’t cappin.
bro, reveal .js has solved this problem already...
hahaha
Josh, consider making this tool open source so that we can contribute to taking this project to the next level! :)
Let's be honest, first week he gets a PR nightmare and then no one even going to look at that code..
Very bad idea, open source requires maintenance and is a massive headache, especially for someone as inexperienced as this guy. If it took him two weeks to build this, imagine how long it'd take him to get through dozens of PRs
@@daylen577 i wouldn't say it's a bad idea... if he is not going to commercialize it, it's just a matter of putting it in a github repo and slapping a mit license on it... he doesn't need to accept or even check any pull requests or fix issues...
also, two weeks is impressive right? things i estimate to be completed in 2hour always takes 2 weeks....
@@daylen577Thought I was the only one to think this. This taking 2 weeks is wild given there isn't much to it.
@@jacksonbourne Yeah this is an afternoon project at best, lol
Nice tool, thanks for releasing it! Found an edge case for you; since the diff only uses the plaintext rather than taking into account the syntax highlighting there is a scenario where the colour of a common token will change, e.g: `const x = test();` -> `const x = "test";` -- The word "test" jumps from yellow to red at the start of the transition. Interpolating the colour of each token as well as its position would solve this issue.
Thank you for sharing the process. As being in a similar position, creating products from scratch with same technology, it's a great feeling how others run through the processes. Well done.
Good comment
This is what i call Software Engenieering ... research... errors ... experiments and though thoughts ... 😂 Good job dude.
With all due respect to the creator, this is just reinventing the wheel.
cheers man! appreciate that
@@unforgettable31 if there's not an actual product for all users how is it reinventing the wheel?
did you mean to say engineering ?
Wow I love this kind of initiative! Amazing work, going to use this from now on!
cheers man!
nicely done Josh. This has so much potential !!
Feedback:
1 - When the "Tab" key is pressed, it focuses on the "Preview" button instead of adding indentation.
2 - I noticed that sometimes code highlighting appears, so I assume you are using a "code editor" library (although, now I think it might have been the browser's language corrector... my mistake). Have you ever heard of "Monaco Editor"? (Probably yes, but it doesn't hurt to ask, right?)
3 - Perhaps consider implementing a resizable (code) window.
Note: "Monaco Editor" allows for auto-formatting and auto-highlighting for multiple languages natively. It may also provide the option to add a "language picker" in the future.
Congratulations for the app! I remember a few weeks ago when I asked about what you were using... I never imagined you would create a project like this!
Best regars and good luck with your bachelor's thesis!
Can some please tell on which browser it is working well
Absolutely LOVE this! Can definitely see myself using this tool for my own short form tutorials!
Great tool! I love this innovative thinking and the initiative taken to implement it. Great job man.
I'll definitely use this for my future videos. Thanks Josh!
Glückwunsch zu 100k Abos :D Hast den Playbutton verdient! Das Tool ist genial
Ty for adding this, really appreciate the effort.
wow! I was searching for something similar for years. Thanks for sharing it!
Can you do a video about unit testing? Like, if it is important or mostly time westing, for frontend or backend, because philosophicaly I don't know why the idea stub and mock make sense.
Looks very nice! One question: Why hit the server to export? Wouldn't the client be able to do that?
Amazing tool! The nice feature to add would be support for multiple programming languages
oh yeah that's way up there
I'd love to use this for Python!@@joshtriedcoding
Awesome work, Josh!
I've seen some people saying they can do it in an afternoon, and to all those people, I say,
Talk is cheap, show me the code.
This is gonna help a lot for the videos.
Thanks Josh!
YES I absolute LOVE this 😭
very nice, do you consider to make it open source?
This tool is awesome!!! Imagine that teachers at school will start to using it, i think it would be faster than typing whole code infont of class and also students will understand the code better because the website is clean and minimalistic.
the algorithm looks like it could've easily been reproduced in python within 2 hours with word lists, splits, and such
and since it's build frame by frame you could just make it exactly like an ordinary animation tool
paste code in the first frame box, and hit new frame, the entire code would be automatically copied, so you just have to keep adding lines each frame and maybe play with a timer, speed, transition effect
Is this open source? Where is the source code? I cannot find it.
What a unique project and great for educators! I'd love to see this as a desktop app for a one time payment.
Thats extremely useful
Josh is the version of Syd from Toy Story that ended up doing really cool stuff on coding
I just subbed. This is dope! Keep it up, man!
5:08 First rule of the internet: Never mention your cat without showing it!
just respect for you, that was an amazing take, your videos never failed us.
Very Cool. I was clicking the arrows that didn't work until I realized you said "Click the arrow key"
Cool project, Josh! Thank you for sharing it!
Very impressive. Good choices with the design of the site.
great job, looks awesome Josh!
good luck with the thesis ;)
btw, in my country we do only thesis for masters, so it was weird for me to hear that...
@@TheIpicon thanks! interesting, which country are you from? For us here in Germany we have a thesis for both, though the masters is much longer and the scientific expectation much higher
@@joshtriedcodingsame for us, but on bachelors we don't call it a thesis just a "final project".
if you go in preview and go back, some text doesnt animate back the way it did, some buggy characters on top of each other, brackets glitching, etc.
Just here to mention "Motion Canvas" which has a "CodeBlock" build in that does basically this.
Thats super cool, congrats!
Cool!! 😃
Great job! 🥳
Good luck!😊
motion canvas is pretty good for animating code as well
Such a great idea for problem to solve. Great content!
Very dope ! Great idea and clean execution too 👏
Love this tool Josh! Amazing work for just two weeks!
P.S. Please be aware you can duplicate your way way passed 10 slides 😉
very nice project. actually was looking for something to animate code for videos!
Guess I've got a new tool for my video making process. Amazing work man!
Ich bin begeistert :)
Beautiful work, well done!
which program are you using on 1:44? it looks pretty neat
Definitely using this in my videos. Thanks for the amazing tool!
Cool, did you consider rendering with ffmpeg on thr client using WASM?
Great tool buddy! 🙌
amazing josh ✨
Hey man, first of all, this is an awesome tool! But I was thinking, what about a color palete editor, to have our own text color choices, background color as well, maybe even a font changing possibility? It's kinda dope but there's only the same theme available. Thank you tho!
this def going to my bookmarks , p.s : can you make some parameters where you can change the speed of the animation and the size of the text and when you add a new slide it automatically copies and pastes the old slide(s content in it , thank you anyway for this great tool
Omg Josh! This tool if amazing 🔥
6:14 "to connect to the server"
yeah, _really_ not a fan of that, will this be open-sourced in the future so it can be run completely locally?
Cool project! This will come handy for sure
Very very cool Josh!
Things I'd like to see:
All the config options like transition easing, duration, syntax highlighter/theme
Also, it's unclear how to copy a slide so maybe a tutorial would be nice on the first visit?
yep i'd like to see those too!
and maybe the delay until the next transition
source code?
Josh is genius Is problem solving mashallah
Isn't better to do rendering in the client side right?
So server expense will be reduced
i am there are sure complied wasm ffmeg libraries are available
This is amazing! Maybe at some point you can give us a closer look behind the curtain of how it works. Especially the converting to video part 🎉
I don’t know how he renders the video, but I’d use Remotion!
man! im proud of you!
This is really cool 😎 Well done 👍
This is just amazing, DAMN
There's a lot of potential here. It would be nice if it was a stand alone app. Editing the code in the app is difficult. I have to edit in notepad and copy and paste it in. It would be nice if it supported other languages.
Edit: Also animation duration and easing types would be good too.
Bless you 🙏 I was really looking for something like this!
hey josh what's the name of the app u were using for the GAME PLAN
Sooo the highlighting only works for JS?
I really like the idea, had the plan to do that myself as well at some point but had no motivation, it looks really nice!
So amazing. The only problem is that i want to animate rust code and when i write "fn" instead of "function", even after changing the file extension, there is no syntax highlighting
What if we took keynote and produced a large dataset of animations on various code snippets. Run ocr on it to calculate positions and new positions. Then we use what the model generates and animate it?
why introduce AI into a field that does not need AI? If you're just curious how well it would perform, my prediction is pretty bad because tokenization needs to be exact, something LLMs are not great at
Why do you not put the export feature in the browser?
This is amazing!! If this were open source I would love to work on it. Gonna use this for sure !!
Yo Josh great vid as always. Btw what topic you doing for your thesis? Im about to start mine. All the best!
it's about how generative ai can be used to increase profitability in e-commerce, even involving a prototype app I coded :)
this is awesome, are you going to open source it like your other tutorials?
Are you planning on open sourcing it?
That's a pretty neat idea. But it doesn't work that well, some characters overlap and don't appear correctly.
But I'll be definitely be using this if you fix these bugs.
You should add some ads there to monetize this : )
Cool! Let's optimize the calculations :)
What program did you use to make those notes and schedule?
Awesome project Josh, thanks for sharing! 👏
What library did you use for the drag and drop feature?
i'm kinda late to this but is there other Programming languages in the tool? (C#, Lua, etc)
It is really beautiful but it would be very nice if we could edit the color of the keywords according to ourselves
Hello. Please add support for non Latin1 text in slides. Rn it fails on export if text is non english (for example comment written in Chinese) with error:
Uncaught DOMException: Failed to execute 'btoa' on 'Window': The string to be encoded contains characters outside of the Latin1 range
you can just use Manim, but expand its functionallity with code highlighting
Is this open source? I'd love to self host it so i can render l i want
nice, whats the tool u use to draw ??
amazing josh!!!
What is this note taking app at 01:39 ?
Excalidraw
dang it, this is decent for 2 weeks and very usable 🔥
can you make it so that you can set how many seconds a slide lasts because they go too fast and it would be really convenient if it were possible to do it
This is just amazing, please make it opensouce so that we can contribute more to it
I'd love to contribute to this project! Please make it open source so the community can maintain it!
Pls help, how do you import and use google/diff-match-patch in your project ?
have already try with CDN => Uncaught ReferenceError: diff_match_patch is not defined at HTMLDocument.
With npm & import in my .js => Uncaught TypeError: Failed to resolve module specifier "diff-match-patch". Relative references must start with either "/", "./", or "../".
I'm new dev, save me x)
Pretty cool for people making videos or presentations. I'd love to see some more UI/UX work on it and accounts where I can save stuff.
Was it necessary to add a giant black background? Is there a way to remove it? 😭
Finally I can code with animations
I assumed you made it oss, but alas
Would be great as people would love to contribute
what library he used for the code animation?
awesome tool, I'm gonna try it out for some game development vids!
Can some please tell on which browser it is working well
Happy to see not another clone video 😁, my man bought some real stuff.
Hi Josh, I absolutely love your videos mate. and I was interested in knowing if one was to reach out to you for professional purposes, what and how do they reach you