Skip to content

Instantly share code, notes, and snippets.

View stephanbogner's full-sized avatar

Stephan Bogner stephanbogner

22 followers · 1 following
View GitHub Profile
@stephanbogner
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
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
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
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
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
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
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
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
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
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,