Console magic

You can detect duplicate ids by evaluating this Javascript expresssion in Chrome devtools console:

([].slice.call(document.querySelectorAll("[id]")))
    .map(function(ele){ return ele.id;})
    .sort()
    .reduce(function(countMap, word) {countMap[word] = ++countMap[word] || 1;return countMap}, {})

Boom! You will get:

> Object { 
   id1: 1, 

   id2: 1,
   some-other-id: 1,
   duplicate-id: 2
   …
}

What is going on here:

• document.querySelectorAll() returns the NodeList of elements that have id attribute
• slice() - converts a NodeList to a JavaScript Array
• map() - converts elements array to array of id strings
• sort() - sorts the array. If you evaluate only up to here you will get the sorted list of ids (with duplicates)
• reduce() - creates an object with id value as key and number of occurrences as value

Additionally, if you add Object.keys(resultFromAbove).sort() you will get a sorted list of unique ids.

Also an example of Map-Reduce 

BTW you can use similar, slightly modified selector expression to list the CSS classes that are used on the page and also mow many times.

Appear on hover

Recently I needed a way to have controls for resizing appear on hover using pure CSS. I wanted allow progressive discovery of the feature to collapse the panels but did not want have a clutter of controls. I also wanted that once the user learns about the new feature they can directly access it by moving their mouse there and clicking.

I did it using :nth-child(1), :nth-child(2), and :hover pseudo classes. For the pair on left hand side, the key idea is that, I had to use display:inline-block; on the container span and float: left; style on :nth-child(2)to get around the CSS limitation of not being able to use a following sibling in markup order to affect the style of preceding sibling.

Do you have better suggestions?

A simple gradle plugin to print the task execution graph of a gradle build.

Here is a gist for a simple gradle plugin implementation that can generate an HTML report of your gradle build's Task Execution Graph.

Here is a sample output for a simple project:

↦ :clean - Deletes the build directory.
↦ :build - Assembles and tests this project.
   ┖ :assemble - Assembles the outputs of this project.
      ┖ :jar - Assembles a jar archive containing the main classes.
         ┖ :classes - Assembles main classes.
            ┖ :compileJava - Compiles main Java source. ⊣
            ┖ :processResources - Processes main resources. ⊣
   ┖ :check - Runs all checks.
      ┖ :test - Runs the unit tests.
         ┖ :classes - Assembles main classes. ↑
         ┖ :testClasses - Assembles test classes.
            ┖ :compileTestJava - Compiles test Java source.
               ┖ :classes - Assembles main classes. ↑
            ┖ :processTestResources - Processes test resources. ⊣

To use it simply apply it in your build.gradle like so:

:
:
apply from: 'build-task-graph.gradle'
:
:

And then run any build like this;

> .\gradlew -m clean build

and find the output report in:

build/reports/printteg.html

It should be a simple exercise to generate hyperlinked output or alternatively emit a .dot file graph or even generate SVG.

I use this to determine which tasks I should exclude using the -x flag and only (carefully) run the ones I need. Of course you have to know what you are doing. The idea is similar to my Maven Phases and Goals plugin.

Feedback welcome!

Angular 2 - template reference variable shadows the component property

Given the Angular 2 component:

import { Component } from '@angular/core';

@Component({
  moduleId: module.id,
  selector: 'app-root',

  template: '<div ref-title>{{title}}</div>',

  styleUrls: ['app.component.css']
})
export class AppComponent {
  title =  'app works!';
}

you get this on the webpage:

[object HTMLDivElement]

The reason is that Template Reference Variable ref-title shadows the title of  AppComponent when evaluating {{title}}.

I guess this is sort of like the loop variables inside an

<li *ngFor="let title in titles">{{title}}</li>

But something does not feel right about TRV.

A simple Weather App using Angular 2, Angular Material 2 and Electron

Working on a simple Weather App using

• Electron
• Angular 2
• Angular Material 2

Also runs as a standard web app.

Built using

• Angular CLI

GitHub

Will document the details soon!