For the past few months I’ve been working on an AngularJS app that makes use of Angular Material as a Bootstrap-like front-end library. I recently had to solve one of the hardest bugs I’ve ever faced in Angular, and I’d like to share my debugging technique with anyone who might encounter the same problem down the road. While the bug was related to the use of Angular Material in my case, it could occur in vanilla Angular as well, so don’t stop reading just yet!

JavaScript is a non-blocking programming language, which means that one chunk of JS code will not necessarily wait for the lines above it to execute before beginning itself. In many cases this is a pretty awesome feature of the language. Imagine if your website was only able to run one window.onload call at a time. If your page needed to perform a number of calculations or data insertions in order to render correctly, things would take forever to load and users would see a bunch of unstyled content and blank boxes at the beginning of every page load. Yuck.

A fun little Javascript game was forwarded around my office recently, and I had a great time revisiting my elementary programming skills while defeating each of its levels. It’s called “You Can’t Javascript Under Pressure”. I would recommend that everyone take the next 10-30 minutes out of their life to check it out. While I found the game relatively easy, I figured it might be nice to share my solutions with the web. This game is great practice for the elementary-level software developer, and working through tough problems with a cheat sheet can be an excellent way to learn new topics. Even if you don’t need any help solving these problems, it can always be fun to see solutions that are different than your own. So, without any further ado, here are my solutions to each of the 5 levels: