If you’ve been struggling with figuring out gift ideas lately, I have the perfect answer for you. I’ll give you three hints:

1. It’s free to download right now and play with
2. It’s not only incredibly incredibly fun, but super useful
3. It rhymes with “Llama sniff schools”

That’s right! It’s JavaScript tools! Here are a few of the cool tools and projects that I’ve come across today, for a number of reasons, that I can’t wait to share with you! Try them out and enjoy!

Web metrics collector

Yep, I said metrics. Nothing better than coming downstairs Christmas morning and unwrapping some nice metrics. Today when perusing http://perf-tooling.today/, I stumbled across a few gems in the tools section. The first was a nice CSS analyzer that outputted JSON, aptly named analyze-css. After geeking out for a few seconds over all of the data that it provided, I found another tool that completely blew my mind.

The same creator of analyze-css has a much more popular tool called phantomas, which is, with out a doubt, the best toy for your metrics lover this holiday season. Honestly, the only words I have to say are:

$ npm install -g phantomas

And let it speak for itself!

Mermaids

If you’ve had a daughter asking you for mermaid-related presents, this is the solution! Mermaid is a really lovely tool for making diagrams and flowcharts in a markdown-like syntax. For example, the above flow-chart was created by the following 4 lines of code:

graph LR;
    A[Hard edge]-->|Link text|B(Round edge);
    B-->C{Decision};
    C-->|One|D[Result one];
    C-->|Two|E[Result two];

That, to me, is simply gorgeous. Now I just need to figure out a way to extract the resultant SVG from the HTML page, and I will never ever touch Visio or OmniGraffle again.

Tracking.js

Look! JavaScript knows where my face is on my webcam, in real time! This is one of the many cool examples from the Tracking.js project, a computer vision library for JavaScript. There are also demos for racing cars and making your head set on fire in a gif. Computer vision uses algorithms to determine parts of videos and images. One classic computer vision problem is determining whether a picture is of a bird or a national park. Tracking.js provides a very easy to use interface for the algorithms, and is definitely a nice place to start for trying out computer vision!

BONUS: Event inspector for Firefox

I have just started using Firefox, and I just stumbled upon a great tool in their element inspector. Next to certain elements, there is a small ev button, that when hovered over, provides access to all of the event listeners associated with that element. While Chrome has a similar pane, Firefox definitely has a better interface for interacting with the Event listener and figuring out exactly how JavaScript events are occurring on the page.