Skip to content

Instantly share code, notes, and snippets.

View isocroft's full-sized avatar
😜
Seriously fooling around!

Ifeora Okechukwu Patrick isocroft

😜
Seriously fooling around!
106 followers · 128 following
View GitHub Profile
@isocroft
isocroft / x-multipart-replace-http-stream-xhr-handler.js
Last active December 16, 2021 16:43
XMLHttpRequest setup for multipart x-mixed-replace HTTP Streaming response
XMLHttpRequest.prorotype.multipartStream = false
var xhr = new XMLHttpRequest()
xhr.lastChunkBytesRecieved = 0;
if (!('multipart' in xhr)) {
xhr.multipartStream = true
} else {
xhr.multipart = true
@isocroft
isocroft / form-abandonment.js
Last active October 25, 2025 21:56
A form abandonment script for all forms on a given web page for SPA and non-SPAs: e.g. contact form, checkout form, signup form e.t.c.
;(function (window, document) {
/**
* Form Abandonment script created by @isocroft
*
* Copyright (c) February 2022-2025 | Ifeora Okechukwu
*
* Works in ReactJS / VueJS / jQuery / Angular / Vanilla
*
* This implements a simple algorithm that basically tracks when forms on a given HTML page
@isocroft
isocroft / monkey-patching-example.js
Last active July 4, 2024 20:54
A way to monkey-patch the HTML5 JavaScript History API
/* @HINT: If statement for feature detection */
/* @CHECK: https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection */
if (typeof window.History === 'function') {
/* @HINT: Copy out the native browser `pushState` function for later use */
const __pushState = window.History.prototype.pushState;
/* @HINT: Also, monkey-patch pushState (which is used by React / Vue / jQuery / Vanilla for their routing) */
window.History.prototype.pushState = function (...args) {
const [, , url] = args
const origin = window.location.origin
@isocroft
isocroft / patched-set-attribute-method.js
Last active April 23, 2022 13:56
Monkey-patching the document.createElement('a').setAttribute() function to be able to sanitise the URLs that are passed to it.
/* @HINT: Extract the native definitions of these APIs from the DOM Interfaces */
const originalSetAttributeMethod = HTMLElement.prototype.setAttribute
/* @HINT: Create a new definition for `setAttribute` that instruments the API to detect suspicious URIs */
HTMLElement.prototype.setAttribute = function setAttribute (attributeName, newValue) {
const that = this;
const previousValue = that.getAttribute(attributeName);
const timerID = window.setTimeout(function () {
/* @HINT: Stop [ DOMSubtreeModified ] event from firing before [ DOMAttrModified ] event */
@isocroft
isocroft / browser_fingerprint.html
Last active January 26, 2026 14:06
This shows how you can use Fingerprint2 can be used to properly create a stable unique visitor id (browser fingerprint) for a web page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="icon" href="/favicon.ico">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link href='https://fonts.googleapis.com/css?family=Opren' rel='stylesheet'>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#f5f5f5" />
@isocroft
isocroft / website_rudderstack_tracking.html
Last active May 22, 2025 23:17
Integrate Rudderstack successfully on a website
<!doctype html>
<html lang="en">
<head>
<title>Isocroft Portfolio Website</title>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/isocroft/browsengine@0.2.3/dist/browsengine.min.js"></script>
<script type="text/javascript">
;(function (global) {
/* @HINT: feature detection for hidden document */
const getPageState = function () {
const hidden = (global.document.hidden || global.document.mozHidden || global.document.msHidden || global.document.webkitHidden);
@isocroft
isocroft / getMessageFromError.ts
Last active December 14, 2025 02:46
Utility to help extract clear, meaningful, human-oriented error messages (as opposed to generic & cryptic error messages) from an axios error object on a web frontend application to aid debugging on the backend
import axios, { AxiosError, AxiosResponse, AxiosRequestConfig } from "axios";
const expandOnError = (errorMessage: string, errorCode?: string, errorResponse?: AxiosResponse) => {
if (errorMessage === "Network Error" && Boolean(!errorResponse)) {
/* @HINT: The message returned below simply means that a CORS error occured OR the name resolution failed */
return errorCode === undefined
? "We are currently updating our systems... Please try again later"
: "Your ISP seems to have some other network-related issues";
}
return "The browser restricted access to the server response! Please contact admin";
@isocroft
isocroft / versionTwo_ReactTestingLibrary_Async.js
Last active November 14, 2025 09:34
This is version 2 of a simple test for how using async/await with react testing library can slow down tests
import React, { useState } from "react";
import { render, act, waitFor } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { roles, Components } from "constants/ui-copy";
const { _TextBoxes: $RecipeFormTextBoxes, _Buttons: $RecipeFormButtons } = Components.RecipeForm;
function RecipeForm ({ onSubmit }) {
function formToObject(form) {
const formData = new FormData(form);
@isocroft
isocroft / react-testing-library-helpers.tsx
Last active May 24, 2025 16:02
Helper functions for react-testing-library to make writing tests a lot easier and faster while maintaining quality feedback
import React, { useMemo } from "react";
import { Provider as ReactReduxProvider } from "react-redux";
import { useForm, FormProvider, UseFormProps } from "react-hook-form";
import { SessionContext } from 'next-auth/react';
import { IntlProvider as ReactIntlProvider } from "react-intl";
import { BrowserRouter, BrowserRouterProps, MemoryRouter, MemoryRouterProps, Router, RouterProps } from "react-router-dom";
import { History, LocationDescriptor, createBrowserHistory, createMemoryHistory } from "history";
import userEvent from "@testing-library/user-event";
import { render, RenderOptions, RenderResult } from "@testing-library/react";
import { renderHook, RenderHookResult, RenderHookOptions } from "@testing-library/react-hooks";
@isocroft
isocroft / extras.ts
Last active June 26, 2026 12:44
A collection of very useful helper functions for frontend working with both React and Vanilla JS
import { lazy } from "react";
import type { JSX } from "react";
import type { UseQueryResult } from "@tanstack/react-query";
/**
* lazyWithRetry:
*
*
* @param {AsyncFunction<[], { default: () => JSX.Element }>} componentImport