JavaScript is an interesting language that has changed our whole perception of the web. Here I will help you understand it better.
Recently, I've created a dynamic story where I wanted an event to trigger when an element is in view. The solution was simple, but it's easy to make a mistake and drain your website's performance. Let's break it down into how we can create a flexible function that doesn't freeze the page. Note, modern browsers have a new API that makes this problem trivial, but first let's try to understand the…
I wanted to write a function that allowed me to wait for a specific time to run the code. The quick and dirty way to do it was to use setTimeout and nest callbacks. For example, at the end of an action, I would like to play an animation before I remove the element from the page. Let's see how we can do that with setTimeout. function victoryDance(element) { // start the animation…
I find it very annoying when I use an instant search field and each key I press creates a new state. What this means every single time I hit the back button, it removes a single key from the URL. I have to press the back button a dozen times to get back to the previous page. The better way to do it is to update the URL and push state after the blur event. It's only when users clicked outside the…
At some point, every web application needs an overlay. A sort of pop-up that obscures the background and asks the user to perform an action. Here is how you do it. First you create the HTML, give the overlay an absolute position, and then set the display to none by default. But what if you don’t have access to the HTML? Luckily, JavaScript has a convenient method for that.…
TL;DR; You are accessing a property of an object that is null. For example, document.getElementById('stuff') returns null. So adding .value will cause the error. You are trying to access a DOM element before the DOM is ready. Use onload or DOMContentLoaded. Test if an object is valid before accessing its property. There are a few variations of this error depending on the property you are trying to…
There is a clear reason why you should use prototypes when creating classes in JavaScript. They use less memory. When a method is defined using this.methodName a new copy is created every time a new object is instantiated. Let's look at an example. In most Object Oriented programming languages a class has a constructor. A constructor is a sort of initializing function that is called every time a…
In JavaScript, like in many other languages a loop can be defined in many ways. The standard of course is the for-loop, the while loop, or do while loop. They are all natively implemented in JavaScript and benefit from the just in time compiler to be optimized for speed. There is recursion too that can be considered a loop, but let's limit ourselves to the native ones. When I started learning…
This is a common error in JavaScript, and it is hard to understand at first why it happens. But if you bear with me and remember that Bugs are a good thing you will be on your way in no time. TL;DR The JavaScript file you are linking to is returning 404 page. In other words, the browser is expecting JavaScript but it is returning HTML results. Here is a simple example that may cause this error. //…
JavaScript live collection is a subject that is rarely talked about. Earlier I had written about a caveat when using them . It did help people but one of the problem is that most didn't understand what was happening and thought it was just a quirk in JavaScript. Let me make things clear. HTML Live collection with JavaScript is not a quirk. It is a feature and you can make good use of it. Let's see…
It comes to a surprise that JavaScript, the most popular language on the web, has the most unconventional method for creating a class. In most object oriented programming languages, classes follow a common syntax. Here is one example: class Person { private String fname; private String lname; public String className = "Person"; public function __construct(fname,lname){ this.fname = fname;…