Categories
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');
			}else{
				lazySRC = x[i].getAttribute('desk-src');		
			}
			if(x[i].tagName == 'VIDEO'){
				x[i].canPlayType("video/mp4");
				x[i].src = lazySRC;
				x[i].load();
				x[i].onload = x[i].play();
				x[i].classList.remove("lazy-load-me");
			}else{
				x[i].src = lazySRC;
				x[i].classList.remove("lazy-load-me");
			}
		}
	}
};
replaceSrc();
window.addEventListener('scroll', replaceSrc, false);
Categories
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 {
    5%{
      background: #000
    }
    10%{
      background: #fff;
    }
    15%{
      background: #000
    }
    20%{
      background: #fff;
    }
    25%{
      background: #000
    }
    30%{
      background: #fff;
    }
    100%{
      background:var(--BC);
    }
  }
  @keyframes wobble {
    33% {
      transform: rotate(1deg);
    }
    66% {
      transform: rotate(-1deg);
    }
  }
  filter{
    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;
  }
  .screen{
    background:var(--BC);
    width:0;
    height: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(){
  screen.style.marginTop = "0px";
  screen.style.width = "100%";
  screen.style.height = "calc(100vh - 20px)";
  setTimeout(function(){screen.innerHTML = 'Welcome to LeemOS'}, 3000);
  setTimeout(function(){screen.innerHTML = screen.innerHTML + 'Login:'}, 4000);
  setTimeout(function(){addEvent()}, 5000);
}

Categories
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.

THIS BLOG IS ONGOING…

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

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

	URL.revokeObjectURL(a.href);
};

function readConfig(e){
		let files = e.files;
		//console.log(reader.readAsText(file));

		if (files.length == 0) return;

		const file = files[0];

		let reader = new FileReader();

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


		reader.onerror = (e) => alert(e.target.error.name);

		reader.readAsText(file);
}

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

Javascript Find and replace text in input fields

One of my recent jobs involved doing a lot of data entry and manually sanitising a lot of data and would use this snippet all the time.

var input = document.getElementsByTagName('input');
for(i=0;i<input.length;i++){
    input[i].value = input[i].value.replace("Animal","Lecturer");

}
var area = document.getElementsByTagName('textarea');

for(a=0;a<area.length;a++){

    area[a].value = area[a].value.replace("Animal","Lecturer");

}