Are all html element closed? Testing it with Javascript

This small snippet check if all html tags are properly closed.

The html can be passed as a string or as an array containing html strings. It is based on the work of Jonathan Aquino that has an online form that has a similar script implemented: http://jona.ca/blog/unclosed-tag-finder

The script run both in NodeJS and in the browser console. I added also a function that allow to test the html coming from a server using the URL.

The usage is:

凸.checkHtml("your html here")

or

凸.checkHtml(["your html here", "and here"])

If you want to check a page served by a server:

凸.buildGetPageFunction()('http://example.com', function(data){console.log(凸.checkHtml(data))})

Wait for Something - When Javascript onload event is not enough

Recently I needed to take actions on certain element of the DOM that would be created by other script and I also needed to take actions when images contained in these element where completed loaded.

The onload event seemed not fitting completely this purpose so I wrote this small function.

• The function simply check the existence of the element (or any other condition) and when the condition is met, it execute the callback function.
• If the condition is not met, it sets a timer to call itself again.
• If after certain number of attempts the condition is still not met, the function stops.

Here some example on the usage.

Minimum Font Size Checker

Simple script to highlight text that is rendered with a font smaller than certain threshold. .
Copy and paste the snippet in the console of any website and run the following commands.
To highlight the small fonts run:

凸.SmallFontChecker.highlight()

This will highlight in purple color all the text that is smaller than 14 pixels.
Is also possible to add two parameters: Minimum font size and color. For example:

凸.SmallFontChecker.highlight("13px", "red")

To restore to the original version you can run the command

凸.SmallFontChecker.reset()

After restoring the page you can run the highlight command with different parameters.
If the page adjust fonts size using proportional units (rem, em, vw, vh, vmin or vmax) you need to re-run the highlight command at every screen size that you would like to check.

How it Works

• First the script traverse the entire DOM and check all elements to see if the font size is under the threshold. To do so it uses the global method getComputedStyle (Documentation: https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle)
• If the font is under the threshold, it saves the inline style in "sfc-originalStyle" attribute so that the original style can be restored
• Second it traverse the DOM again and change the font size and font color adding inline stiles.
• It is two steps process because children elements are influenced by parent element the script would fail detecting small font in children
• The recursive function to traverse the DOM is inspired by (copied from?) a script of Douglas Crockford (video)