A few weeks ago, we were working on a table of contents for the Vanilla JS Academy. It’s a script that dynamically creates a list of skip links from the headings in a document. It was a great opportunity to implement the :target pseudo-class, which is a neat CSS selector you might not know about.
In jQuery, you can use the outerWidth() and outerHeight() methods to get an element’s total width and height including its padding and borders. You can easily do the same thing in vanilla JS with support back to IE9.