Skip to content

Instantly share code, notes, and snippets.

Avatar
✌️
Hello there!

Jairus Joer jairusjoer

✌️
Hello there!
View GitHub Profile
@jairusjoer
jairusjoer / video-scroll-sync.js
Last active Dec 9, 2022
Sync video playback with vertical scrolling
View video-scroll-sync.js
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 Dec 9, 2022
A collection of frequently used JavaScript snippets
View utility.js
// 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 Sep 24, 2022
A simple JSON response for PHP endpoints with corresponding response code
View json-response.php
<?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 Dec 9, 2022
Post data to a PHP endpoint and dynamically display a response with Alpine.js
View post-and-reply.md

Post and reply

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

HTML

<html x-data="utility">

  <!-- ... -->
  
@jairusjoer
jairusjoer / post.php
Last active Sep 15, 2022
Accept POST data in JSON format
View post.php
<?php
$json = json_decode(file_get_contents('php://input'));
$response = new stdClass();
if (!$json) {
$response->state = [
'type' => 'error',
'message' => 'Something went wrong. Please try again.'
@jairusjoer
jairusjoer / starship.toml
Last active May 12, 2022
My personal configuration for starship.rs
View starship.toml
format = """
$hostname\
$directory\
$git_branch\
$nodejs\
$rust\
$character\
"""
[hostname]
@jairusjoer
jairusjoer / night.js
Last active Apr 27, 2022
Simple dark mode switch with callback and local storage capability
View night.js
/**
* @param {object} night Configure night mode controls and targets.
* @param {string} night.mount Mount theme class to single given DOM element.
* @param {string} night.targets Match control targets using `querySelectorAll()`.
* @param {string} [night.theme] Set optional theme name to be mounted. Default: night.
* @param {function} [night.callback] Optional callback triggered on target interaction.
* @return {object} Current theme state and targeted DOM elements.
*/
const night = ({ mount, targets, theme = "night", callback }) => {
@jairusjoer
jairusjoer / rasterGlobe.js
Created Sep 22, 2021
Create an array of globe coordinates based on a limited amounts of points.
View rasterGlobe.js
const rasterGlobe = (limit = 1000, x1, y1) => {
let base = Math.pow(limit, 1 / 2);
let root = Math.floor(base);
let data = [];
const rasterLine = (x2) => {
for (let i = 0; i < root; i++) {
let y = y1 + ((y1 * -2) / (root - 1)) * i;
data.push({ x: x2, y: y.toFixed(5) });
}