stephanbogner’s gists

stephanbogner / bookmarklet.js

Created July 9, 2023 18:24

Bookmarklet code to toggle Youtube playback interface (to take screenshots)

	// How to create bookmarklet: https://www.freecodecamp.org/news/what-are-bookmarklets/

	javascript: (() => {
	const gradient = ".ytp-gradient-bottom";
	const ui = ".ytp-chrome-bottom";
	if(document.querySelector(ui).style.opacity === "0"){
	document.querySelector(gradient).style.opacity = 1;
	document.querySelector(ui).style.opacity = 1;
	}else{
	document.querySelector(gradient).style.opacity = 0;

stephanbogner / index.html

Created December 21, 2021 13:10

Draggable element using transform | Vanilla JS

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1">
	<title>Drag element</title>
	<style type="text/css">
	#container{
	position: absolute;
	top: 0;

stephanbogner / index.js

Last active November 27, 2021 14:22

Run child processes in Nodejs in queue (in my example the Astro build process)

	const { spawn } = require('child_process');

	let queue = ['A', 'B'];
	let currentlyProcessing = false;

	const addToQueueContinueWithNext = (newItem) => {
	queue.push(newItem);
	checkQueueAndStartIfIdle();
	}

stephanbogner / index.html

Created October 26, 2021 08:11

Download map canvas as png from Mapbox GL JS

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset='utf-8' />
	<title>Display a map</title>
	<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
	<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.1/mapbox-gl.js'></script>
	<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.1/mapbox-gl.css' rel='stylesheet' />
	<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
	<style>

stephanbogner / example.html

Last active August 25, 2021 08:54

Example html structure when you work with content that is larger than your screen size (e.g. an non-responsive app that runs on 4k but you are on a laptop)

	<!-- Example html structure when you work with content that is larger than your screen size -->
	<!-- (e.g. an non-responsive app that runs on 4k but you are on a laptop) -->
	<!-- See comment below for screenshot -->

	<style>
	/* Extracted from tailwind.css https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.7/tailwind.css */
	.relative { position: relative; }
	.w-screen { width: 100vw; }
	.h-screen { height: 100vh; }
	.bg-black { background-color: #000; }

stephanbogner / electron.js

Last active August 11, 2021 09:08

Print silently (no print dialog/window opening) in electron.js with a physical printer - no external libraries needed

	// Adjusted from https://stackoverflow.com/a/46020931/3763660
	// This does not work on its own, but needs to be placed in the electron.js file

	printSilently('Hello physical world');

	function printSilently(text){
	let printWin = new BrowserWindow({width: 800, height: 600, show: false });
	let file = 'data:text/html;charset=UTF-8, <p>' + text + '</p>'
	printWin.loadURL(file)
	printWin.webContents.on('did-finish-load', () => {

stephanbogner / index.html

Last active July 12, 2021 22:17

Create hexagon from cube (unusual derivation but clean algorithm) and render with D3

	<!-- Screenshot of how it looks like below -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.0.0/d3.min.js" integrity="sha512-0x7/VCkKLLt4wnkFqI8Cgv6no+AaS1TDgmHLOoU3hy/WVtYta2J6gnOIHhYYDJlDxPqEqAYLPS4gzVex4mGJLw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

	<div id="output">
	</div>

	<script type="text/javascript">
	var svgCanvas = d3.select("#output")
	.append("svg")
	.attr("width", 1000)

stephanbogner / App.js

Last active June 24, 2021 12:12

Simple example / boilerplate / skeleton for a Lottie animation in react with lottie-web (no lottie react framework needed)

	import LottieAnimationComponent from './components/LottieAnimationExampleComponent.js'

	function App() {
	return (
	<div className="App">
	<LottieAnimationComponent/>
	</div>
	);
	}

stephanbogner / index.html

Created June 22, 2021 12:59

Script to make a flickering with increasing frequency (think tak ...... tak .... tak ... tak .. tak . takkkkk ). Useful for when a timing is ending. I used this algorithm in combination with a shader for our GMTK Game Jam 2021 Game "Cursed Leash" (https://st-phan.itch.io/cursed-leash)

	<script>
	let counter = 0;
	setInterval(function(){
	counter += 0.03/8;
	counter = Math.min(1, counter);

	var y = Math.sin(counter * counter * counter * 80);
	var bool = true;
	if (y < 0) {
	document.body.style.background = "grey";

stephanbogner / simpleLib.js

Created June 18, 2021 11:43

Simple module.exports example for NodeJS (to make a simple library)

	const someFunction = () => {
	return false;
	}

	const someOtherFunction = () => {
	return false;
	}

	module.exports = {
	someFunction,

Stephan Bogner stephanbogner