Skip to content

Instantly share code, notes, and snippets.

View jairusjoer's full-sized avatar
✌️
Hello there!

Jairus Joer jairusjoer

✌️
Hello there!
5 followers · 18 following
View GitHub Profile
@jairusjoer
jairusjoer / settings.json
Last active February 5, 2024 10:23
My personal configuration for Visual Studio Code
{
"[javascriptreact]": {
"editor.defaultFormatter": "vscode.typescript-language-features"
},
"[typescriptreact]": {
"editor.defaultFormatter": "vscode.typescript-language-features"
},
"editor.bracketPairColorization.enabled": false,
"editor.cursorBlinking": "phase",
"editor.cursorSmoothCaretAnimation": "on",
@jairusjoer
jairusjoer / sticker.ts
Created May 19, 2023 14:04
A super simple script to create placeable random stickers with image elements
const sticker = (set: string[], canvas: HTMLElement | null) => {
let z = 0;
if (canvas) {
canvas.onclick = (event: MouseEvent) => {
let randomImage = set[Math.floor(Math.random() * set.length)];
let randomRotation = Math.random() * (45 - -45) + -45
const element = document.createElement('img');
@jairusjoer
jairusjoer / drag.ts
Created May 19, 2023 14:03
A super simple script to create draggable HTML elements
export const drag = (elements: NodeListOf<HTMLElement>) => {
let z = 0;
if (elements) {
for (const element of elements) {
let [adjustedX, adjustedY, currentX, currentY] = [0, 0, 0, 0];
let moved = false;
const dragMouseUp = (event: MouseEvent) => {
document.onmousemove = null;
@jairusjoer
jairusjoer / reset.css
Last active January 31, 2024 13:27
An opinionated yet extensible CSS reset for various project scopes
:root {
font-size: max(calc(16vmin * 100 / 1440), 16px);
}
*:where(:not(iframe, canvas, img, svg, video):not(svg *)) {
all: unset;
display: revert;
outline: revert;
}
@jairusjoer
jairusjoer / .zshrc
Created March 4, 2023 11:06
My personal configuration for zsh
# https://github.com/nvm-sh/nvm
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
# https://github.com/zsh-users/zsh-autosuggestions
source ~/.zsh/zsh-autosuggestions/zsh-autosuggestions.zsh
# https://starship.rs/
eval "$(starship init zsh)"
@jairusjoer
jairusjoer / three.js
Last active February 19, 2023 22:24
A simple wrapper for three.js to integrate 3D objects into a website
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
import {
AnimationMixer,
Clock,
Color,
DirectionalLight,
HemisphereLight,
PerspectiveCamera,
@jairusjoer
jairusjoer / video-scroll-sync.js
Last active December 9, 2022 20:52
Sync video playback with vertical scrolling
const scrollVideo = (media, threshold = 1) => {
const video = document.querySelector(media);
const target = video.parentNode;
const scrollDistance = target.clientHeight - window.innerHeight;
let observer = new IntersectionObserver(
(entries, observer) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
@jairusjoer
jairusjoer / utility.js
Last active December 9, 2022 20:52
A collection of frequently used JavaScript snippets
// Transform a ISO 8601 format date string to a given locale ―――――――――――――――― //
const date = (input, locale = "de-DE", options = { dateStyle: "long" }) => {
const date = Date.parse(input);
return new Intl.DateTimeFormat(locale, options).format(date);
};
// Mount, toggle and store dark mode theme on client ―――――――――――――――――――――――― //
/**
* @param {object} night Configure night mode controls and targets.
* @param {string} night.mount Mount theme class to single given DOM element.
@jairusjoer
jairusjoer / json-response.php
Created September 24, 2022 20:58
A simple JSON response for PHP endpoints with corresponding response code
<?php
$response = new \stdClass();
$response->state = [
'code' => 200,
'type' => 'success', // Can be used for CSS indicators classes such as `.is-[type]`
'message' => 'Your data has ben successfully submitted.'
];
@jairusjoer
jairusjoer / post-and-reply.md
Last active March 27, 2023 15:54
Post data to a PHP endpoint and dynamically display a response with Alpine.js

Post and reply

Post data to a PHP endpoint and dynamically display a response with Alpine.js

HTML

<html x-data="utility">

  <!-- ... -->