Coding a complete snake game in JavaScript
Use link for 10% off:
Educative.io helps you learn in-demand tech skills faster. Text-based courses with embedded coding environments mean you can jump in and learn without all the fluff โ no set-up, no scrubbing back and forth through videos, no hassle.
๐ pomle on Twitter
๐ pomle on YouTube (Meth Meth Method)
๐ Follow on Twitch and support by becoming a Subscriber
We record the show live Mondays 7 AM PT
๐ Fun Fun Forum
Private discussion forum with other viewers in between shows. . Available to patron members, become one at
๐ mpj on Twitter
๐ CircleCI (Show sponsor)
Robust and sleek Docker-based Continuous Integration as a service. I used CircleCI prior to them becoming a sponsor and I love that their free tier is powerful enough for small personal projects, even if they are private. Use this link when you sign up to let them know you came from here:
๐ Quokka (Show sponsor)
Wonder how MPJ evaluates JavaScript inline his editor. Quokka is the answer – use this link when you buy to let them know you came from here:
๐ Wallaby (Show sponsor)
Wallaby.js runs your JavaScript tests immediately as you type and displays execution results in your code editor. It is insanely fast, because it only executes tests affected by your code changes and runs tests in parallel. Let them know you came from us by using this link:
๐ FUN FUN FUNCTION
Since 2015, Fun Fun Function (FFF) is one of the longest running weekly YouTube shows on programming ๐
thanks to its consistency and quality reaching 200,000+ developers.
๐คฆโโ๏ธ The Failing Together concept is what makes FFF unique. Most coding content out there focus on step-by-step tutorials. We think tutorials are too far removed from what everyday development is like. Instead, FFF has created a completely new learning environment where we grow from failure, by solving problems while intensively interacting with a live audience.
Tutorials try to solve a problem. Failing Together makes you grow as a developer and coworker.
๐น Each show is recorded live on Twitch in a 2-hour livestream on Mondays. The host, assisted by the audience, is tasked to complete a programming challenge by an expert guest. Like in the real world, we often fail, and learn from it. This, of course, reflects what the audience identifies with, and is one of the most praised aspects of the show.
โฏ On Fridays, an edited version of the show is adapted for and published on YouTube.
Content Topics revolve around: JavaScript, Functional Programming, Software Architecture, Quality Processes, Developer Career and Health, Team Collaboration, Software Development, Project Management
Hilarious video, I learned nothing and so much at the same time
Lol I worked for Arcot for several years (not a developer). If it makes you feel any better, they co-wrote the 3D-Secure protocol with Visa.I'm pretty certain your bank didn't code anything. Most banks (even large ones) use Card Processors (3rd parties who handle all their transactions), and those processors would hire out a company like Arcot to do the authentication part of the transaction. As far as I remember, the card brands put a lot of pressure on the Financial Institutions to implement some sort of security solution like this by shifting fraud liability to them. There weren't many players when I was still working in that world, and I assume that hasn't changed.
Did he just not save the file at the very end? I saw the white dot in visual studio meaning it was not saved? XD
Game developement starts at 14:50
Meth Meth Method is back! What a surprise on Friday morning!
Nice hairstyle..
Haven't even seen it yet but I see the guy from MethMethMethod! Do more stuff! Yay
It seems we need more abstractions
Meth Meth Method is a fu….g genius. I love you.
Meth Meth Method! His Mario JS series was what taught me a lot about JS when I was just starting out. Great to see him again!
good to see you again pontus! i loved your mario series
Chrome has an excellent Debugger. Use it, by simply writing the word debugger wherever you want to set a breakpoint. This might also create a good impression during an interview!
Pontus do you ever continue with your Super Mario Series? Your Channel was/is awesome man! ๐๐ผ
Meth Meth Method, your Tetris and Mario playlists are so rich of knowledge, helped me a lot when I was starting, feels great to see you again!
Lol I love this ! Great fun and good collab guys! Next up 3D with photorealistic rendering 120 hz!!
Best anime crossover
YEAAA!! WELCOME BACK @POMLE !!!!!!!!
Having worked at a company that provided software to financial institutions I can only assume how this JS code came to be. These companies are very closed off to provide the visage of high security. As a result, the devs are also not exposed to alternative coding practices and open source projects. The company I worked for had mostly PHP devs, but not many of us were very comfortable with front-end work. So, enhancing the UI in any way was rarely done with best practice and definitely done with a heaping amount of jQuery.
Additionally, these companies focus on a particular browser because their clients never upgrade. So, usually support is dedicated to some old version of IE.
What I learned …. My bank shows zero monies …. I should blame the computer.
MMM I loved your Tetris series! Created a Tetris game after being influenced by your series ๐ The game if someone cares ยฏ_(ใ)_/ยฏ https://blockwars.miniblip.com
39:59 – on back to using script tags. Isn't that html file just a .vue component lul?
I know it's Swedish (because I am too), but the way he pronounces "HTML" sounds like "Hot Emmel", and that's how I'm gonna start pronouncing it at work now too.
The others are already a bit weirded out that I pronounce "MySQL" as "My Squeal", so "Hot Emmel" will just be icing on the cake.
"Smart people can think about many things at once"
I think you're looking at it from the wrong perspective. I've been there, about a decade and a half ago. I confused advanced code with "being smart" and procedural programming with a lot of experience behind it as "thinking about a lot at once".
That's not true at all, it's all down to experience. And you'll never feel "smart" doing it, but others will perceive you as smart if you display that experience.
It's not intelligence, it's experience. It's not multitasking, it's experience.
You know what comes next and you know how to get there, but that doesn't mean you're thinking about the next step yet. You just know the step before will be better for whatever code comes later because you've done that type of function a few hundred times before.
But when it all comes down to it, you know just as little about the outcome in your 20th year of programming as you do your first. It's still "hacking until it works, then refactor". You just know what will work a bit better than your first year, or your fifth, or your tenth.
Had this as an interview project not too long ago. Wish I thought of this approach.
POMLE!!!!! <3
Why did Robert Downey Jr. colored his hair? And why is he coding snakes while Jarvis could build this stuff for him?
Good to see you again pomle ๐
You didn't SAVE THE FILE; that's why it never updated in the browser ๐
The most swenglish accent I've heard in a while. Love it.
I'm Miss Miss Missing Pontus' videos ๐
Great tutorial thnx friends!
Haha, that piece of shit company arcot systems – is run by an Indian dude (Ram Varadarajan) out of Sunnyvale, CA. =) I hope he sees this video. Scandalous is right.
Enjoyed watching and following the initial draft of snake game. I really want pomle to continue adding content to his youtube channel. In fact just before this video I was trying to reach pomle about his youtube channel. Thank you mpj for bringing pomle
I like your code style. Its like my own. Don't know why others complain always… ๐
39:20 actually, the width and height is resolution of the canvas, while the rendered size is based on style. So instead of context scaling, you could have simply set height and width of the canvas to 30 instead of 300 ^^
what is this forEach sorcery? How does it work. Why don't you loop using *for in* ? ๐
1:09:58 spec for agents by w3c is to imply body if its missing in source ๐ so its always there.
I love that you show the imperfections and the process of figuring things out. Most other channels are very scripted and for beginners (like myself a year or so ago) it gives this illusion that the programmers hosting the tutorial just sorta memorize every thing or that it should be really easy and that can be discouraging when you first start out because its not that easy and not necessarily intuitive. It shows, while programming is working with machines, it still is VERY much a humanistic process.
Tony Stark