JavaScript Tutorials

  • By
    Lazy Object Initialization

    The Firefox DevTools underlying code, which is written with JavaScript and HTML, is a complex application. Due to the complexity and amount of work going on, the DevTools team has done everything they can to load as little as possible. Furthermore the team has...

  • By
    Override window.alert

    For years the only bit of feedback web developers could get was via alert("{str}") calls. These days we have the web console but, in rare cases, we don't have a console and alert calls are our only window into a value at a given time.One problem...

  • By
    Duplicated Argument Names

    Oftentimes we override or monkey patch functions and, in many cases, there are arguments we don't care too much about. A common practice for those arguments is using _ for argument names -- it's a generally accepted and known practice for "this isn't important".

  • By
    Image Lazy Loading

    Lazy loading images is a practice that's been popular for a decade and for good reason: images are usually the heaviest downloads on a given webpage and avoiding unloading images that are never seen saves the user bandwidth. There are plugins for lazy loading images in...

  • By
    JavaScript waitForTime

    I write a lot of tests for new features within Firefox DevTools. We have hundreds of "mochitests" which open the browser and perform synthetic actions like clicking, typing, and other user actions. I've previously written about waitForever which essentially halts following actions without locking the...

  • By
    How to Create a QR Code

    QR codes aren't everyone's cup of tea but I quite like them. If I see something I want to remember or check out later, especially when on the road, it's super easy to take a quick picture -- it's much easier than trying to remember a...

  • By
    How to Detect an Ad Blocker

    One of the unspoken rules of the internet is that most content is "free"... at the cost of webpage being littered with advertisements and trackers. This was't a big problem in the early internet days but trackers and advertisements have become so intrusive and unapologetically aggressive...

  • By
    designMode

    Every once in a while I stumble upon an API or browser setting that I can't believe ever existed. Such examples can be seen in the numerous String.prototype properties such as bold, italics, and even blink, which wrap given string text in their representative HTML...

  • By
    How to Not Minify Source with webpack

    The webpack JavaScript utility has taken over the modern JavaScript landscape, so much so that it's hard to be a JavaScript developer and not use it. JavaScript build utilities are the point where they do best practices implicitly, like minify code, caching, and more.I was...

  • By
    Stop Installing Packages Globally

    These days, most front-end projects are going to involve NPM packages of some kind. Occasionally, when browsing documentation for these packages, I’ll see a recommendation to install a package like this.Or like this.In both of these examples, the package is installed globally. This means you can...