JS – Avoid duplicating addEventListener()

I see this mistake way more often than I should. Someone adds an event listener with an anonymous function callback to an element (like a button) then puts it in a a function that may get called multiple times. While this very common setup may seem harmless, it can create some serious issues.

The problem is this setup will add multiple listeners to the element, a new one each time the function is called, meaning three calls will add three listeners, then when the event is triggered the callback will be run three times. This JSFiddle demo clearly shows the scenario in action.

Continue reading “JS – Avoid duplicating addEventListener()”

Advertisements

Notepad.exe in HTML5 and JavaScript

On the morning of 10 October, I tired of working on my capstone and had finished contributing a patch to an open-source project, I decided I needed a small, fun, project to quickly create as a change of pace. A few minutes later, either inspirational or pure randomness stuck: recreate Windows Notepad.

Continue reading “Notepad.exe in HTML5 and JavaScript”

WordPress – Load enqueued JavaScript in async or defer

Lately I have been working with WordPress, creating a complete website (even original theme) with it for my college capstone. Generally, things have been fair but there have been some things I have wanted to write a rant-y blog post about (but will not because I value my readers too much πŸ™‚ ). One of those things is loading JavaScript into a site.

According to the documentation, wp_enqueue_script is “the recommended method of linking JavaScript to a WordPress generated page.” So as a good developer I have used this for loading my JavaScript. Aside from the rather crazy parameter order and defaults, I was quickly irked by the inability to load scripts asynchronously. After much searching though the WordPress docs and various programming sites, I came across the following article which uses a simple hash to denote async scripts, use the clean_url hook to filter all external URLs for JavaScript files (although file extensions are only hints) and add the async HTML attribute. However, the function was a bit too naive and limited for my taste (what if I wanted to defer a script?), so I wrote my own function using the basic idea of that snippet, which is the topic of this article. πŸ™‚

Continue reading “WordPress – Load enqueued JavaScript in async or defer”

JS – Smooth scrolling without jQuery

You know what link anchors are, correct? They are used to jump between different sections of the same page. Quite often when a link anchor is clicked, the page smoothly scrolls to the desired location. However, smooth scrolling is not the native behavior. No, the native behavior for link anchors is to instantly jump between sections, which can be jarring and unpleasant. That is why many developers smooth it out using jQuery scripts like this one.

I too enjoy it when anchor links smoothly scroll, but for the last few months I have on a “jQuery fast” and it has severely limited my smooth scrolling options. Smooth scrolling is impossible to recreate with CSS transitions, I have had limited success using requestAnimationFrame, and fun scroll-to-top buttons like Elevator.js are not appropriate. I have really been in the dark on filling the hole left by removing jQuery.

Continue reading “JS – Smooth scrolling without jQuery”

Uncovering a super-persistent tracking cookie

This is why we cannot always have nice things in web development.

Like anything in web development, developers have a choice to make: do they use technology in a responsible, law-abiding manner or not? Do they write code and systems that are helpful and beneficial to the visitor or not? As much as I would like to see everyone using their talents for good, I know that does not happen. Who do you think black-hat hackers are and what they do?

Continue reading “Uncovering a super-persistent tracking cookie”