DailyJS

sdm, CSS HTML Hint

Alex R. Young

Subscribe

@dailyjs

Facebook

Google+

libraries ui browser dom

sdm, CSS HTML Hint

Posted by Alex R. Young on .
Featured

libraries ui browser dom

sdm, CSS HTML Hint

Posted by Alex R. Young on .

Simple DOM Module

Whenever I have to write real DOM code, I get a little bit of perverse pleasure out of the fact I can remember certain arcane parts of the DOM APIs. I wouldn't describe myself as a DOM expert, but after years of high-level frameworks it's easy to forget addEventListener, parentNode.removeChild, appendChild, and the fun cross-browser issues we used to have to deal with.

awalGarg sent in a small project that attempts to make DOM code more readable without having the exact same API as jQuery. It's called sdm (License: WTFPL) and it attempts to do part of what jQuery does, but only by using the standard DOM APIs without any shims.

The API is designed around two objects: $$ and $. If you want to work with multiple nodes, then use $$, otherwise for single elements use $. The methods map neatly to DOM methods:

  • getElementsByClassName: $$.cl(className [, parent = document])
  • getElementsByName: $$.nam(name [, parent = document])
  • getElementsByTagName: $$.tag(tagName [, parent = document])

There are more methods as well, including $$.data() and $$.attr.

One interesting detail is the use of $.id instead of $('#' + id). The author said it's too easy to forget the hash symbol, and I do this all the time with CSS selector APIs, so I liked the idea.

I've noticed the tendency for people who use the newer frameworks like React and Angular to want to avoid jQuery. Most of the time you don't need to manipulate or query elements (React lets you reference specific nodes, for example), but sometimes you actually need to do things outside of the framework and have to dip back into DOM programming. Naturally pulling in the entire jQuery library feels unnecessary, so smaller libraries like this are becoming interesting again.

CSS HTML Hint

There's a popular and lightweight tooltip library called hint.css by Kushagra Gour. It's very simple and easy to use, but doesn't support HTML in the hints. Ivan Starkov sent in css html hint (GitHub: istarkov/html-hint, License: MIT, npm: html-hint) which overcomes this limitation.

To use it, you'll need to use the right classes and markup, but it basically involves adding the hint--html class to a container with a child that has the hint__content class. The bundled CSS looks nice, so it's easy to drop into an existing project.