Never let stray errors in the console

When doing web development I fix all the errors that show up in the console. Often they don’t seem to impede the actual use of the software, but nevertheless I think it’s a good practice to fix them all. This following example should illustrate why.

I was doing some maintenance on an Angular project at work. I noticed that there were a couple of errors showing up in the console, but the web site still worked great, even with the errors.

The reason I was working on this project was because of a bug that was reported by QA. There was a display error that was happening and it was related to animations that were used in the Angular transitions, these are used when switching from one component to another. The error manifested itself with Android phones and iPhones. This bug probably slipped by because everything was working fine on desktop browsers.

After investigating, I saw that there was an error in the console about calling a property on undefined. On a view, this can be fixed using the ?. operator. The view used the ?. operator elsewhere but there was one place it was missing. I was sure this couldn’t be what was messing up the display of the animated transition.

I searched and searched but couldn’t find the problem.

So I decided that while I was there, I might as well fix this error that showed up in the console. I changed the . operator for ?. and lo and behold this also fixed the display problem.

By correcting it, it also corrected the other problem, which was probably caused by having an error during the Angular rendering.

This example demonstrates that you should never let console errors live, even if they don’t seem to have any negative effect on the web site.

Semantic CSS

Semantic CSS says that class names should describe an element rather than specify it. While we can’t and shouldn’t always use semantic class names, ie: when using CSS grids or similar concepts, in general it’s a good concept to strive for.

I will illustrate why semantic class names are a good thing with a simple example I recently encountered.

Good CSS classes are descriptive of the element itself and not the visual effect of the class. I recently modified some code that contained classes like w-80 (for width 80% !important) or ml-3 (for margin-left 3.0em). This made for things like:

<input class=”change-email-input w-80″ name=”email”>

A better way would have been to put the width 80% in the existing change-email-input class or to put in a new class like form-field. form-field describe what the element is, a form field, not what it should look like, width 80%.

I was asked to make some changes to this site to make it more responsive. At lower screen sizes it didn’t make sense to have this field at 80% width. It needed to be at 50%.

It would have been possible to add a @media query to change w-80 to 50%, but that would be really counter-intuitive. Conditionally removing the w-80 class on mobile devices to add a w-50 class would necessitate manipulating the HTML or templates which can be easily avoided.

If the CSS class would have been called form-field making a media query to change it’s size on mobile devices would have been much less awkward. It also opens other options such as adding a small-form-field to the element when on mobile while keeping the previous class.

Like in many other areas of programming, it’s a good idea to separate concerns and let the CSS files contain the style information while keeping the HTML files as declarative as possible by using semantic class names.

Here is a good article that goes over the concept of semantic class names in more detail: https://css-tricks.com/semantic-class-names/.

Preventing multiple calls on button in Angular

If you wish to prevent your users from clicking on a button multiple times in a row, for example if the button triggers some animation that needs to complete before being triggered again, you can use debouncing.

Debouncing is a form of rate limiting in which a function isn’t called until it hasn’t been called again for a certain amount of time. That is to say, if the debouncing time is 200ms, as long as you keep calling the function and those calls are within a 200ms window of each other, the function won’t get called.

You could use a button’s [disabled] attribute and setTimeout, but I have ran in some cases where this interfered with the ongoing animation of the first call.

Here is how to use RxJs with Angular to implement debouncing.

In your template just bind a function to an event like you would normally:

(click)="doStuff()"

In your component use the following code:

import { Observable } from 'rxjs/Observable';
import { Subject } from 'rxjs/Subject';
import 'rxjs/add/operator/debounceTime';

// ...
// ...
export class SomeComponent {
    private buttonClicked = new Subject();

    constructor() {
        const btnClickedObs = this.nextClicked
                                  .asObservable()
                                  .debounceTime(200);
        btnClickedObs.subscribe(() => 
                      this.functionToCall()
                      );
    }

    doStuff() {
        this.buttonClicked.next();
    }
}

Debouncing is similar to throttling. With throttling you limit the number of calls to 1 per time frame of unit so the first call happens automatically. If the user keeps mashing the button continuously, throttled calls will be made at a rate of 1 per throttleTime whereas with debouncing only one call will be made. Which one you want depends on your particular scenario.

You can mix both, but you must apply the debouncing before the throttling and the throttlingTime must be at least twice the debouncingTime. Otherwise one of them will have no effect.

Remove Hot Network Questions from StackOverflow

While I’m at work, I try to keep distractions at a minimum so I can concentrate on my work.

Like many .Net developers I tend to use StackOverflow a lot but one thing that gets the better of my curiosity is the Hot Network Questions tab on StackOverflow. I’ve clicked on non work related questions fare more time than I’d care to admit. To remedy this, on my workplace computer, I’ve made the HNQ tab go away.

hnq.PNG

Using the Grease Monkey Firefox add-on it’s possible to create JavaScript scripts, to modify the pages you surf.

I wrote a small script to make the entire thing go away on both StackOverFlow and SoftwareEngineering :

// ==UserScript==
// @name        HNQ Hider
// @description Hides the Stackexchange HNQ

// @include /^https?:\/\/(.*\.)?stackoverflow\.com/.*$/
// @include /^https?:\/\/(.*\.)?softwareengineering.stackexchange.com/.*$/

// @version     1
// @grant       none

// ==/UserScript==

document.getElementById('hot-network-questions').outerHTML='';