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 / index.html
Created June 25, 2018 20:36
Native like pinch and zoom of div with HammerJs
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HammerJS Pinch Zoom and Drag</title>
<style type="text/css">
body{
margin: 0;
@stephanbogner
stephanbogner / 1-pico8-godot-shader.shader
Last active January 30, 2024 19:23
PICO-8 color palette (or any other) shader for Godot (with the .html file below you can easily adjust the shader to any color palette)
// Adapted from "How to Limit Color Output with Shaders in Godot"
// By TheBuffED
// On https://www.youtube.com/watch?v=Scrdv4oSeNw
// Type of shader https://docs.godotengine.org/en/3.0/tutorials/shading/shading_language.html#shader-types
shader_type canvas_item;
// The shader strength which between 0 (not applied) and 1 (fully applied) because I want to fade the shader in and out
// Can be changed from node via `get_material().set_shader_param("shaderStrength", newValue)`
uniform float shaderStrength = 1.0;
@stephanbogner
stephanbogner / index.js
Created March 7, 2018 22:17
Create tree structure from paths array
var paths = [
["Account"],
["Account", "Payment Methods"],
["Account", "Payment Methods", "Credit Card"],
["Account", "Payment Methods", "Paypal"],
["Account", "Emails"],
["Account", "Emails", "Main Email"],
["Account", "Emails", "Backup Email"],
["Account", "Devices"],
["Account", "Devices", "Google Pixel"],
@stephanbogner
stephanbogner / fibonacciSphere.html
Last active July 11, 2023 12:49
Simple implementation of a fibonacci sphere in ThreeJS
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>Fibonacci Sphere in ThreeJS</title>
<style>
body {
margin: 0;
}
@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 / example.html
Last active December 28, 2022 08:45
Extract hex color codes from a string (e.g. text, SVG, HTML, XML) using a regex in JS
<script type="text/javascript">
let testString = ''
testString += '<div style="color: #00A9F8"></div><div style="color: #12345"></div>';
testString += '<div style="color: 00A9F8"></div><div style="color: #123456"></div>';
testString += '<div style="color: #fff"></div><div style="color: #000"></div>';
let regularExpression = /#(?:[0-9a-fA-F]{3}){1,2}/g // btw: this is the same as writing RegExp(/#(?:[0-9a-fA-F]{3}){1,2}/, 'g')
let extractedHexCodes = testString.match(regularExpression);
@stephanbogner
stephanbogner / index.html
Last active October 24, 2022 12:33
Save svg from dom as file (great when working with d3)
<a id="downloadLink" href="" download="diagram.svg">Download ↓</a>
<svg id="svg" width="120" height="120">
<rect fill="#000000" x="10" y="10" width="100" height="100"></rect>
</svg>
<script type="text/javascript">
setDownloader('downloadLink', 'svg')
function setDownloader(linkId, svgId) {
// Get svg element
@stephanbogner
stephanbogner / index.html
Created November 8, 2017 14:49
Simple example of using javascript to take a photo from a website
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Camera</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<meta name="viewport" content="width=device-width,initial-scale=1">
<style type="text/css">
.cameraRoll {
@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();
}