A simple, non disruptive strategy to reduce spam from a website’s contact form. — TL;DR I built the form with an alternate destination, which switches to the proper one once a visitor spends one second on the page. A contact form on a website I created a website for a friend who requested that it include a contact form. That’s very understandable. A website contact form offers a quick in-place call…

Display decoded React error messages in the log stream instead of criptic titles React Error Messages from Real Users In order to improve our service, we log our users’ errors. The errors may indicate flaws that we were unable to discover or just overlooked. Error messages are vital in the observability stack because they assist the…

What changed when we replaced XHR calls with sendBeacon for sending analytical information. This article compares XMLHttpRrequest and sendBeacon, but the comparisons are all valid for the Fetch API with default configuraion. See the exception at the end of this article. At Fiverr, we send anonymised metrics from the browser to our servers, using HTTP requests. We use the information we collect…

Speed up your npm init process by setting defaults — npm uses init-package-json package under the hood. A quick view can tell us we can set up some defaults to be picked up by it. You can add some default configuration details for npm init in your ~/.npmrc file.

npm@7 brings fundamental changes to npx, which may break your CI process. TL;DR npm_config_yes=true npx <package_name> npm@7 now uses npm exec as an underline to npx. As a result, your terminal should wait for you to proceed with installation of uninstalled packages. …

Embed rich HTML in any Markdown document, even a GitHub readme, using SVG and foreignObject. — TL;DR Jump to the example below to create a rich HTML document enveloped in an SVG file. Readme frenzy With the new GitHub profile readme feature, rich readme files with personal banners and customised messaging have become real popular. But Markdown, especially GitHub markdown is limited, and us snowflakes want to display our…

A straightforward and performant way to detect mobile browsers. The Client Hints proposal is already available in Google Chrome and makes for a very cost-effective way to detect (among other things) mobile devices. Should I use it already? If this feature is not widely supported, should we use it?

Reduce terminal instance boot time I am a performance and observability enthusiast. I am also extremely impatient. This combination of traits drives me to find ways to accelerate any process that takes even a tiny bit longer than absolute necessary. I made my terminal boot procrastinate for efficiency! I want my terminal to perform operations only when they are required. I already measure…

Front end application code, more than any other, runs on environments we have little to no control over. Each browser has its unique set of attributes, feature support, connectivity levels, and more. In modern applications users configure half of the features, A/B tests alter the rest, and user installed browser…