Coding a complete snake game in JavaScript

💛 Educative (Episode sponsor)

💛 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

💛 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)

💛 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

[brattonross]

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!

[BenRangel]

The most swenglish accent I've heard in a while. Love it.

[stangeorge]

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!

[SamiullahKhan]

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

[thesunrock]

Meth Meth Method is back! What a surprise on Friday morning!

[KimHogeling]

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!

[nathancornwell]

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.

[orawbdn]

Meth Meth Method is a fu....g genius. I love you.

[vorname]

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 ^^

[dyssus]

Lol I love this ! Great fun and good collab guys! Next up 3D with photorealistic rendering 120 hz!!

[Alex-whrj]

good to see you again pontus! i loved your mario series

[JimLagus]

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.

[DramDisturbr]

39:59 - on back to using script tags. Isn't that html file just a .vue component lul?

[morphman]

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.

[vorname]

1:09:58 spec for agents by w3c is to imply body if its missing in source ;) so its always there.

[BeheadedKamikaze]

You didn't SAVE THE FILE; that's why it never updated in the browser :-(

[sshadow]

Had this as an interview project not too long ago. Wish I thought of this approach.

[JoshuaHeagleDev]

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.

[yvzcn]

Pontus do you ever continue with your Super Mario Series? Your Channel was/is awesome man! 👍🏼

[CherryPoppinz]

Haven't even seen it yet but I see the guy from MethMethMethod! Do more stuff! Yay