Javascript Snippets

Forced to Care About Internet Explorer: lazy loading

If you work in the public sector you’ll be forced to care about IE and especially speed and as is the public sector you need to spend as little time as possible time on any project.

So we tried every lazy load library we could find and consistently found issues with all of them using modern Javascript so I decided to just make a simple script using old Javascript and it just works

var replaceSrc = function () {
	x = document.getElementsByClassName('lazy-load-me');
	for (i = 0; i < x.length; i++){
		if (x[i].getBoundingClientRect().top < window.innerHeight) {
			img = x[i]
			if(window.innerWidth < 850 && x[i].getAttribute('mobi-src') != null){
				lazySRC = x[i].getAttribute('mobi-src');
				lazySRC = x[i].getAttribute('desk-src');		
			if(x[i].tagName == 'VIDEO'){
				x[i].src = lazySRC;
				x[i].onload = x[i].play();
				x[i].src = lazySRC;
window.addEventListener('scroll', replaceSrc, false);
Python Snippets

A Concept for Generating Random Seeds with AI on Light Weight Devices

Obviously, this is nothing new, but I was thinking about the potential NSA backdoor in intel’s random number generator RDRAND and the vulnerabilities in the UNIX PRNG.

Many suggestions to get around this problem uses taking photos of something with natural randomness for “True Randomness” like Cloudflare’s LavaRand or Bruno Sanguinetti’s Quantum random number generation on a mobile phone proposal.

So this problem has been solved for years now so why did I even think about it?

I currently use an encrypted thumb drive to store keys and similar mission-critical data and was looking for better solutions and came across a DIY solution using an arm processor and that got me thinking about using a little camera sensor, maybe pointing at some gell in a box that you shake up to make bubbles but that would be quite large.

giving the device a cellular connection introduces its own problems but makes the device pocketable and inconspicuous, imagine you’re at work and you plug this big box and cable into your workstation you’re gonna get looks.

The bellow code has many issues one being using base64 to encode the only image allows for and entropy of 65536000000(with my dyslexic brain I can’t even read that number) and the code for that particular AI generation is open source but it also requires that you have the same model set and still the results still might not result in the same outcome but the idea is you run your own AI generation and handshake with your personal device.

import requests
import base64
import random

def faceRand():
    imageSeed = requests.get('')
    randomSeed = base64.b64encode(imageSeed.content)
    #cloudflares lavalamps got nothing on this


    return random.random()

Python Snippets

Image ALT Scraping for Accessibility Reporting

In my last employment we had someone who’s job it was to update alt tags on images and shareholders and management needed reports on progress so I built a small script to just that as well as another to make suggestions for the alt tag using the google vision API.

import requests
import json
import sys
import time
from selenium import webdriver
from selenium.webdriver.common.keys import Keys
from selenium.webdriver.firefox.options import Options

URLS = [line.rstrip('\n') for line in open('urls')]

options = Options()
driver = webdriver.Firefox(options=options)

#driver = webdriver.Firefox()


imageslist = []

i = 0
while i < len(URLS):
		imageLen = driver.execute_script("return document.images.length;")
		b = 0
		while b < imageLen:
			imageslist.append(driver.execute_script("if(document.images[" + str(b) + "].alt == '' | 'null'){ return document.images[" + str(b) + "].src}"))
			b += 1
		images = '\n'.join(str(e) for e in imageslist)
		with open("images", "a+") as file:
			file.write(URLS[i] + ': ' + images + '\n')
		i += 1
		i += 1


import requests
import json
import sys

IP_API = ''



URLS = [line.rstrip('\n') for line in open('urls')]

ip_address = requests.get(IP_API).text


i = 0
while i < len(URLS):
  resp =
        '' + API_KEY,
        json = {
          "requests": [{
            "image": {
              "source": {
			    "imageUri": URLS[i]
            "features": [{
               "type": "LABEL_DETECTION",
              "maxResults": 3
  data = resp.json()
      json_data = data["responses"][0]["labelAnnotations"][0]["description"] + " " + data["responses"][0]["labelAnnotations"][1]["description"] + " " + data["responses"][0]["labelAnnotations"][2]["description"]
      json_data = "An Error Occurreed"
  with open("alts", "a+") as file:
    file.write(URLS[i] + '\n' + 'Description: ' + json_data + '\n')

  i += 1
CSS Snippets

CSS-only Responsive Navigation Menu

In one of the many unsuccessful job applications I have completed this one required me to build a navigation menu as a technical test.

I decided to build one entirely in CSS rather than using a JavaScript library like jQuery which was “allowed”.

I didn’t get the job but I can always display what I completed here.

@import url("");
* {
  margin: 0;
  padding: 0; }

body, button, input, select, textarea {
  font-family: 'Open Sans', sans-serif;
  color: #222; }

a {
  color: #282b34; }

a:visited {
  color: #48516b; }

a:focus {
  outline: thin dotted; }

a:hover, a:active {
  outline: 0; }

nav {
  text-align: center;
  padding: 10px;
  background-color: #e2e2e2; }

nav .menu-item {
  display: inline-block;
  width: 150px;
  border-bottom: solid 2px #ea5a0b;
  border-right: 2px solid transparent;
  border-left: 2px solid transparent;
  border-top: 2px solid transparent;
  transition: all .75s;
  margin: 3px; }

.has-child ul {
  display: none;
  background-color: #e2e2e2;
  border: solid 2px #ea5a0b; }

.has-child:hover > ul {
  display: block;
  float: left;
  list-style: none;
  width: 150px;
  text-align: left;
  position: absolute;
  margin-top: 10px;
  margin-left: -1.5px; }

nav .menu-item a {
  text-decoration: none;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 15px;
  padding-right: 15px; }

.has-child ul li {
  border: none; }

.has-child ul li:hover {
  border: none; }

nav .menu-item:hover {
  border-right: solid 2px #ea5a0b;
  border-left: solid 2px #ea5a0b;
  border-top: solid 2px #ea5a0b; }

.burger {
  display: none;
  cursor: pointer;
  width: 35px;
  margin: auto; }

.bar1, .bar2, .bar3 {
  width: 35px;
  height: 5px;
  background-color: #333;
  margin: 6px 0;
  transition: 0.4s; }

#burger:checked ~ .burger > .bar1 {
  -webkit-transform: rotate(-45deg) translate(-9px, 6px);
  transform: rotate(-45deg) translate(-9px, 6px); }

#burger:checked ~ .burger > .bar2 {
  opacity: 0; }

#burger:checked ~ .burger > .bar3 {
  -webkit-transform: rotate(45deg) translate(-8px, -8px);
  transform: rotate(45deg) translate(-8px, -8px); }

#burger:checked ~ .nav {
  display: block !important; }

#burger {
  display: none; }

.container {
  margin: auto;
  width: 90%;
  max-width: 1600px; }

@media only screen and (max-width: 320px) {
  /* BASE
	=================== */
	=================== */
	=================== */ }

@media only screen and (max-width: 480px) {
  .nav {
    display: none; }
  .burger {
    display: block; } }
CSS Javascript Snippets

CRT Boot Animation – CSS

Recently I had an idea for a simple .io game based on the thought of merging a game I used to play, back in the day called hack the game by chaozz and all those wait timer, checkbox, textbased multiplayer facebook games.

as I’m writing this I’ve just discovered chaozz is working on his own version, but right now I’m showcasing the animation I built while tinkering.

  @keyframes flicker {
      background: #000
      background: #fff;
      background: #000
      background: #fff;
      background: #000
      background: #fff;
  @keyframes wobble {
    33% {
      transform: rotate(1deg);
    66% {
      transform: rotate(-1deg);
    display: block;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    background: url(../img/scanlines.png);
    background-size: 100% 100%;
    z-index: 99;
    position: fixed;
    top: 0;
    left: 0;
    margin:0 auto;
    overflow: hidden;
    box-sizing: border-box;
    padding: 10px;
    margin-top: 50vh;
    transition: margin 2s, width 2s, height 3s;
    animation: wobble 0.25s ease-in-out 2, flicker 2s 1;

window.onload = boot;

function boot(){ = "0px"; = "100%"; = "calc(100vh - 20px)";
  setTimeout(function(){screen.innerHTML = 'Welcome to LeemOS'}, 3000);
  setTimeout(function(){screen.innerHTML = screen.innerHTML + 'Login:'}, 4000);
  setTimeout(function(){addEvent()}, 5000);

Javascript Snippets

Gesture-based controls for OBS-Studio in Virtual Reality

This Project is hosted here

Working with the applet functionality provided by OVR-Toolkit provides useful methods for in-game multi-tasking through its ability to access your minimised windows as virtual displays in the VR playspace or what I’m exploring the Chromium Embedded Framework.
Not only does OVR-Toolkit have CEF they have built an API to pull data from your VR Headset and VR Controls and this inspired me to work on this applet.

one of the many challenges with this project I wanted to tackle was making setting persistent some people may immediately think to use the steam API to store and retrieve settings but that would myself to support and maintain a database that would contain IDs and potentially fingerprintable information, so I decided to load and save a JSON Config file through JavaScript.


const downloadToFile = (content, filename, contentType) => {
  const a = document.createElement('a');
  const file = new Blob([content], {type: contentType});

  a.href= URL.createObjectURL(file); = filename;;


function readConfig(e){
		let files = e.files;

		if (files.length == 0) return;

		const file = files[0];

		let reader = new FileReader();

		reader.onload = (e) => {
			const file =;
			const lines = file.split(/\r\n|\n/);
			confige.innerHTML = lines.join('\n');

		reader.onerror = (e) => alert(;


function saveState(){
	downloadToFile(JSON.stringify(config), 'config.json', 'text/plain');