ASMR Pong Programming in the Park

Follow @devaslife for more code-in-nature content, and check out www.inkdrop.app/ for the ultimate markdown note taking experience.
Get the code: github.com/chriscourses/progr...
0:00 Intro and background
1:12 Canvas setup
2:07 Draw paddles
4:22 Respond to user input
7:31 Restrict paddle to boundaries
9:31 Create a ball
12:04 Randomized ball movement
13:02 Ball and paddle collision
20:11 The finished product
20:52 End screen
I was feeling pretty unmotivated the past three months, especially after the large success of my fighting game tutorial. Many people would think that such a successful video would provide tons of motivation, and rightfully so, but for me, I felt as if I were just coasting, rather than putting in consistent effort that makes impact. Although there are rewards to be reaped from passively owning a successful video, it just doesn't feel good as consistently working towards a goal.
During this period, I've been watching a ton of different tech KZbinrs rather than producing, mainly because... well, its a lot easier to watch than build. One KZbinr who stuck out to me was @devaslife and for obvious reasons-he essentially pioneered a style of coding videos where the code takes place in aesthetic sceneries, and without any voiceover (all you hear are the sounds of nature and coding keystrokes).
If there are a few things that I've consistently been passionate about, it's getting outdoors, video production, and coding of course. @devaslife was able to merge all of those into one, and his style seemed like the perfect gateway to start producing more videos again, so here is my attempt.
Anyways, I'm glad to be back using my actual camera gear, and have some super helpful content coming out regarding career advice, code cleanliness, Three.js, and canvas.
I don't plan on doing this exact style in the future anytime soon, but thank you @devaslife for getting people out and being an inspiration to many!

[@semirsinani1342]

when i saw the video format i thought of Takuya immediately. I am glad that you gave credit in the video.

[@TinyMaths]

This definitely works; I'm actually watching this while doing my first refactor of the first apps that I've built over the past few months. Very therapeutic scenery and natural sounds (and the typing too). Great film making by the way!

[@jonathanzhu6917]

devaslife is amazing and I love his style of videos, honestly wouldn't mind seeing more people pick up on it!

[@ChrisCourses]

Love his style, very peaceful and fun to make, can't wait to see more from him

[@KaueO.Castro]

@@ChrisCourses os night

[@KaueO.Castro]

Pode night

[@KaueO.Castro]

Pode night

[@MudassirKhan-sx9jy]

👍Dev as life . 👍Chris courses .

[@fullcourseyellow5940]

How did u make ur code window be transpalent to the bg video?

[@apartbrain]

Hi, can you tell which editor it is and how did you achieve transparent background?

[@Coding_Asmr_PraDev]

Need more these brother, it motivates me to not quit what I have been doing.

[@armandsalle8447]

Really nice !! How did you do the video editing with you code editor?

[@gaganrastogi9624]

Wow, you are also a fan of "devaslife". I love your videos too. Thanks for making these.

[@ChrisCourses]

Big fan, thanks for watching!

[@neunmalelf]

I really enjoy this format. 😊👍

[@trashinGame]

man the scenery and the typing sounds make this an absolute banger of an ASMR video + u get to learn too!

[@Nodsaibot]

but no socks with them sandals -100 points!

[@martinthomas8955]

How did you record this? its beautiful

[@emanuelvidalrm]

nice homage to @devaslife

[@mounir101]

So glad to see you with this tutorial. Thanks so much, bro.

[@sylens_]

Nice style, I see you’re a fan of devaslife programming videos

[@ChrisCourses]

Big fan, love his work 🙌

[@peterweyland117]

Thank you!)) Great tutorials!))

[@DwikiIkhwan]

What a fresh idea, great tutorial overall. Salute!

[@rupertodiaz8673]

Great tutorial Chris, kuddos++

[@theJYC]

Would you mind sharing how you managed to modify the opacity of the Sublime Text background? Looks awesome :)

[@dustintrombly]

I assume this is an Apple silicon MacBook? Looks like one. The battery life, screen quality + brightness, and ability to actually use it on your lap without heating your legs is such a treat. I did something similar to this recently and was blown away at the realization that up until owning my M1, I wasn’t able to truly have an enjoyable extended experience taking my laptop outdoors.

[@notSoAnonyymus]

I'm not sure what tutorial you plan on doing next but what about rogue like or dungeon crawler?

[@rummanmiazi3022]

What is the code editor you use

[@simon-hb7wf]

I love the concept !! keep up the great work !

[@comoyun]

quality content 👌

[@sora1099]

This would be a dope series, great ASMR btw!

[@tojuju]

this is so cool. hope you have more of these

[@Turbo_Waitress]

This is awesome. What type of laptop do you use for development?

[@grivelator]

Probably a MacBook with MacOS...

[@marcelo.victor]

Chris, hi, your subscriber from Brazil! Amazing simple Pong tutorial! Can you make a javascript tutorial on how to display a div on a button click, the div being always attached to the button by the ID (inserted dinamically via JS with "after" and show above/bottom or left/right of the button when this button is positioned at top, bottom, left, right of the window? Without this div created by JS being cut off screen? I have tried a lot but I'm bangging my head against the wall trying to do this!

[@ChrisCourses]

Hey Marcelo, if you have a CodePen of your current work, shoot it over through this comment. I can make some quick edits w comments to point you in the right direction, should be relatively quick I believe 🙏

[@marcelo.victor]

@@ChrisCourses thank you so much for being able to help me! I tried more, studied more and finally i did it! Please continue the AWESOME work on this channel!

[@user-dd1ht1zz9l]

Hey @marcelo.victor, i looked into the comment and i think i found a way to do it: Dynamic Div #dynamicDiv { display: none; position: absolute; border: 1px solid #ccc; padding: 10px; background-color: #fff; z-index: 1; } Click me document.getElementById('myButton').addEventListener('click', function() { // Create a dynamic div var dynamicDiv = document.createElement('div'); dynamicDiv.id = 'dynamicDiv'; dynamicDiv.innerHTML = 'This is the dynamically created div!'; // Attach the dynamic div after the button this.after(dynamicDiv); // Position the dynamic div relative to the button positionDynamicDiv(dynamicDiv, this); // Display the dynamic div dynamicDiv.style.display = 'block'; // Remove the dynamic div after a certain time (for demo purposes) setTimeout(function() { dynamicDiv.remove(); }, 5000); }); // Function to position the dynamic div based on the button's position function positionDynamicDiv(div, button) { var rect = button.getBoundingClientRect(); var viewportWidth = window.innerWidth; var viewportHeight = window.innerHeight; // Check the position of the button relative to the viewport if (rect.top < viewportHeight / 2) { // Button is in the top half of the viewport div.style.top = rect.bottom + 'px'; } else { // Button is in the bottom half of the viewport div.style.bottom = (viewportHeight - rect.top) + 'px'; } if (rect.left < viewportWidth / 2) { // Button is in the left half of the viewport div.style.left = rect.right + 'px'; } else { // Button is in the right half of the viewport div.style.right = (viewportWidth - rect.left) + 'px'; } }

[@senseiAree]

Hey Chris, just a quick and real question... How did you kept ur laptop charged?

[@ChrisCourses]

The newest MacBooks have great battery life, think mine can go about 6-8 hours of basic use without a charge

[@QkysenQ]

damn@@ChrisCourses

[@xcliber]

May wanna mute the part of the video where you can hear Free Fallin' in the background. This style of video is pretty cool and I wouldn't want to see it taken down.

[@Skylla54]

coded along with you, that was fun 😄👍 To keep up with you and doesnt loose track to often, i used `vi{zf` to fold the folders.

[@brafesta]

i'm a c# programmer and somehow i just realize that c# and js are really really similar ... bruh

[@yugimaniaca8043]

Hello Chris, your video looks great!!! Can you do a video tutorial on how to apply the chroma key?

[@ChrisCourses]

I could, but probably shouldn't since I know devaslife mentioned in one of his videos that he isn't ready to reveal that info just yet. Wouldn't want to disrespect him by revealing his channel's special ingredient, but to give you some direction, I did it all in post, meaning that there was no special setting I added to sublime to change the background or anything like that. Used Davinci Resolve and was able to get something going after 3ish hours of learning their color panel and chroma key tool. Hope that helps a bit!

[@vaaaaaaaaan8678]

This literally helps. I started to understand some parts that I cant understand before

[@trashinGame]

congrats on 100k subs man! *Programming Elden Ring in the Park* when?

[@biirdman89]

really damn cool. as someone who has been self-taught for a while now, I'm happy I was able to keep up and understand what you were doing.

[@ChrisCourses]

Awesome, glad you have the hang of it, takes some time for sure, but eventually you'll be able to code all of this stuff from your head as the knowledge continues to build

[@gnet888]

good idea

[@bohardw1884]

This video is familiar with Takuya's video! Its great

[@Geloooooooooo]

Nice content

[@Nodsaibot]

You should declare or include a mini lib with shorthand names for common operations and methods? like OneLoneCoder does for example const select = el => document.querySelector(el); so you just do on the next line and ALL future DOM selects const canvas = select('canvas'); then include the lib in the comments? :D

[@rummanmiazi3022]

Good good good good

[@MudassirKhan-sx9jy]

Cool♥️

[@briankgarland]

Didn't even look up as the girls walked by. True programmer. 😂

[@ChrisCourses]

🤣🤣🤣

[@xcliber]

Forgot to swap one of the 'width' to 'height' when you copy/pasted the ball physics for bouncing off the bottom. That's why the ball's not going all the way down. I need to get back into programming.

[@ChrisCourses]

This is true, noticed after the fact and was like: welp, too late now 😅 Fixed in the source and for the end screen preview

[@Alb0z32]

These javascript game tutorials are very helpful man, they helped me learn more about OOP in javascript and the game logic. Keep up the good work man :)

[@comoyun]

how long have u been coding?

[@Alb0z32]

@@comoyun 3 years, mainly full stack(front end and nodejs with express and react). I also recently learned basics of java in a bootcamp

[@comoyun]

@@Alb0z32 oh, that's awesome!

[@calcio437]

nice

[@05.aishiqmishra4]

I woke up and i saw this

[@rummanmiazi3022]

How to install unity

[@rakasin]

This is hot shit! Love it 😍

[@souvikbiswas9169]

Miss you!

[@souvikbiswas9169]

Where you have been!

[@blakevollbrecht9026]

14:50 NOOOOOOO

[@Vim_Tim]

Nice but needs more Neovim

[@sidekick3rida]

Central Park!

[@ChrisCourses]

Nailed it 👍

[@cecece775]

I thaought takya dropped a new vidéo hahahha

[@lakehighland]

I’m on the train to 100k subs!!!

[@omenworks]

@devaslife fan here ;)

[@7aidas7]

PLEASE can you make object fall game with images changing with score? I searched in youtube and didn't find anything like that. Can you make that game? Pls like this comment guys

[@rummanmiazi3022]

So so so so so so so so so so so so

[@andreaspetersen2662]

When i go on pension after being a corporate dev most of my life, this is the type of stuff i want to do 😂

[@TheMonkeyworkshop]

🤣

[@Paranoiarts]

Do you know the Movie "Pong". Thriller! 8 Oskars.

[@shuaidong7995]

不错不错!!!我也很喜欢 @devaslife 视频风格, 从此我也开始关注你. 希望你的视频越来越好 (Great, great!!! I also really like @devaslife's video style, and now I'm following you too. I hope your videos will get better and better.)