Vue Teleport enables the relocation of components from their current nested structure to a specified element using the 'to' attribute. This feature is particularly beneficial for elements with conflicting z-indexes that overlap with the existing user interface (UI). For example, instead of having a modal window that only partially overlaps the UI, you can make it overlap the entire UI by teleporting it to the body tag. Learn more at: https://vuejs.org/guide/built-ins/teleport.html ... https://www.youtube.com/watch?v=S90UOPat1yA

This series will be launched as individual lessons, then, on completion, the series will be launched as one large video for those who prefer chapters over playlists. First lesson out tomorrow (April 20, 2023) and will continue in 1-2 day release increments. ... https://www.youtube.com/watch?v=Wcvqnx14cZA

Learn how to use canvas to build your own games at https://chriscourses.com/courses/javascript-games/videos/javascript-games-for-beginners ?Download the free HTML5 Canvas cheat sheet at https://chriscourses.com/cheatsheet ?Gear I used to produce this video: https://kit.com/chriscourses/chris-courses-studio-setup In the last episode, we covered skill number one of how to become a canvas pro: Creating and Resizing Your Canvas. We also improved our drawing skills by learning how to draw a very basic rectangle on the screen. The end goal here is to create amazing interactive visuals, but there’s only so much we can create with just rectangles and squares. To get the most out of our canvas pieces, we first need to understand the full extent as to what objects we can draw and how to draw them. To name some, with canvas we can draw: 1. Rectangles - https://christopherlis.com/projects/amplify 2. Lines - https://christopherlis.com/projects/its-alive! 3. Arcs / Circles - https://christopherlis.com/projects/intertwined 4. Bezier Curves - http://codepen.io/tholman/full/foxtn/ 5. Images - http://codepen.io/allanpope/pen/LVWYYd 6. Text - http://codepen.io/sakri/full/mtlDu/ For the sake of time, we won't be covering all of these shapes, but we will learn how to code those that are used the most: rectangles, lines, and arcs. Once we get a grasp on how to draw these three shapes, I’ll show you how to efficiently create hundreds of these shapes at a time using only a couple lines of code. So without further adieu, let’s get to work, and cover skill number two: Drawing Shapes. Video Timeline: ----------------------------- 00:19 - What can we draw with canvas? 00:56 - Charizard 01:30 - Screencast tutorial begins 02:12 - How to draw lines on the canvas 04:35 - How to add colors to your shapes and lines 07:08 - How to create an arc / circle with canvas 10:33 - Creating multiple shapes with a for loop 12:28 - Randomizing your objects' locations Video Resources: -------------------- How to draw various canvas elements: http://www.html5canvastutorials.com/ Khan Academy Radians Tutorial: https://www.khanacademy.org/math/algebra2/trig-functions/intro-to-radians-alg2/v/introduction-to-radians The Platform: ------------------------- http://chriscourses.com is a platform in progress whose goal is to educate aspiring and seasoned web developers via story driven learning. Each course tells a different story, and each milestone reveals a different scene. With an expansive universe to explore, you can track your progress, and gain the necessary skills needed to build your dreams. For updates on the progress of chriscourses.com and future videos, join the Chris Courses mailing list at http://chriscourses.com. Chris Courses Social: ---------------------- ... https://www.youtube.com/watch?v=83L6B13ixQ0

Learn how to use canvas to build your own games at https://chriscourses.com/courses/javascript-games/videos/javascript-games-for-beginners ?Download the free HTML5 Canvas cheat sheet at https://chriscourses.com/cheatsheet ?Gear I used to produce this video: https://kit.com/chriscourses/chris-courses-studio-setup This episode covers skill number three of becoming a canvas pro: Animating Canvas Elements. From animation basics, object oriented JavaScript, and random number generation, this episode comprehensively covers everything you'll need to know to get your objects moving on the screen. Video Timeline: ----------------------------- 01:26 - Animation with requestAnimationFrame 04:56 - Clearing the canvas with clearRect 06:22 - What is velocity? 07:15 - How to bounce our objects off the edges of the screen 11:26 - Creating randomization (x, y coordinates and dx, dy velocities) 14:48 - Intro to object oriented JavaScript 23:58 - Creating multiple circle objects, and storing them in one variable 26:30 - Drawing and animating all of our circles using a for loop, array, and object oriented programming 28:25 - How to ensure circles are only being spawned within the canvas's boundaries The Platform: ------------------------- http://chriscourses.com is a platform in progress whose goal is to educate aspiring and seasoned web developers via story driven learning. Each course tells a different story, and each milestone reveals a different scene. With an expansive universe to explore, you can track your progress, and gain the necessary skills needed to build your dreams. For updates on the progress of chriscourses.com and future videos, join the Chris Courses mailing list at http://chriscourses.com. Chris Courses Social: ------------------------------------- Twitter: https://twitter.com/chriscourses Facebook: https://www.facebook.com/chriscourses Christopher Lis Social: --------------------------------------- Twitter: https://twitter.com/christopher4lis CodePen: http://codepen.io/chriscourses Beats: ------------- Joakim Karud - Looking To The Sky w/Peter Kuli & Kasey Andre ... https://www.youtube.com/watch?v=yq2au9EfeRQ