Skip to content

Instantly share code, notes, and snippets.

View SleeplessByte's full-sized avatar
💎
💎 💎 💎

Derk-Jan Karrenbeld SleeplessByte

💎
💎 💎 💎
View GitHub Profile
// Turn all HTML <a> elements into client side router links, no special framework-specific <Link> component necessary!
// Example using the Next.js App Router.
import { useRouter } from 'next/navigation';
import { useEffect } from 'react';
function useLinkHandler() {
let router = useRouter();
useEffect(() => {
let onClick = e => {
@mattdesl
mattdesl / cli.js
Created September 13, 2022 10:37
colour palette from text prompt using Stable Diffusion https://twitter.com/mattdesl/status/1569457645182152705
/**
* General-purpose NodeJS CLI/API wrapping the Stable-Diffusion python scripts.
*
* Note that this uses an older fork of stable-diffusion
* with the 'txt2img.py' script, and that script was modified to
* support the --outfile command.
*/
var { spawn, exec } = require("child_process");
var path = require("path");
@jacob-ebey
jacob-ebey / image.ts
Last active February 29, 2024 05:25
Remix Image Component
import { createHash } from "crypto";
import fs from "fs";
import fsp from "fs/promises";
import path from "path";
import https from "https";
import { PassThrough } from "stream";
import type { Readable } from "stream";
import type { LoaderFunction } from "remix";
import sharp from "sharp";
import type { Request as NodeRequest } from "@remix-run/node";
import type { LoaderFunction, ActionFunction } from "remix";
import { useLoaderData, useFetcher } from "remix";
import invariant from "tiny-invariant";
import cuid from "cuid";
import React from "react";
import type { Task, User } from "@prisma/client";
import { requireAuthSession } from "~/util/magic-auth";
import { ensureUserAccount } from "~/util/account";
import { placeCaretAtEnd } from "~/components/range";
import { getBacklog } from "~/models/backlog";
@Myndex
Myndex / OrangeYouGladIHaveNoLife.md
Last active September 4, 2023 20:11
Orange You Wondering About Contrast? Part I of three on the APCA and why contrast is important. Especially orange contrast.

Orange You Wondering About Contrast?

What is contrast anyway? In this context, we are talking about the contrast of text on a background, and more directly, how well you can read that text. While this may seem simple in concept, the reality is not only challenging but increasingly important. The internet destroyed the printing industry nearly overnight. Where there were once magaine and newsstands, there are now empty spaces. And reading in general had dropped 40% in the last two decades.

And the internet is hard to read. Too hard, and it shouldn't be. There are some old existing standards on contrast and readability, some dating back to the last century, that are part of the problem. When WCAG 2 was being worked on nearly two decades ago, computers used bulky CRT monitors, and the iPhone was still on the drawing board.

Back then, cell phones were nothing but a phone, websites were only on your desktop/laptop, and those sites invariably used the same core websafe fonts & basic HTML colors. Served over

@Mellen
Mellen / dev.to.spam.filter.js
Last active December 4, 2020 03:02
Filters out the posts from the dev.to feed that are obviously spam
// ==UserScript==
// @name dev.to spam filter
// @version 1
// @include http*
// @match *://dev.to/*
// @grant none
// @run-at document-end
// ==/UserScript==
const dev_posts = document.body;
@tannerlinsley
tannerlinsley / README.md
Last active February 19, 2022 09:45
How to fix the multiple-instances of React error when using linked NPM modules that import React as a peer dependency

How to fix the multiple-instances of React error when using linked NPM modules that import React as a peer dependency

Back-link your linked module's React dependency back to your application's React

In your app that you are receiving the multiple-version error:

  • Go to node_modules/react
  • Run yarn link

In your linked module that also uses React:

  • Run yarn link react
@alexjlockwood
alexjlockwood / RingOfCirclesView.kt
Last active January 10, 2024 14:07
Kotlin implementation of a Ring of Circles animation, inspired by https://twitter.com/InfinityLoopGIF/status/1101584983259533312
import android.content.Context
import android.graphics.Canvas
import android.graphics.Color
import android.graphics.Paint
import android.util.AttributeSet
import android.view.View
private const val N = 16
private const val PERIOD1 = -10000.0
private const val PERIOD2 = -500.0
@pinge
pinge / mobile.video.encoding.md
Last active March 19, 2024 20:06
Video and audio encoding for playback in Android and iOS devices

Video and audio encoding for playback in Android and iOS devices

This document aims to provide an easy way encode video optimized for playback in mobile devices that use the Android or the iOS operating systems.

libx264 is used for (single or two-pass) video encoding and libfdk_aac for audio encoding.

ffmpeg, libx264 and libfdk_aac settings are optimized for playback quality and compatibility on Android and iOS. There is extensive documentation and references for each of the settings used and contributions are very welcome :)

@johnjreiser
johnjreiser / AmazonLinux-InstallPostGIS.sh
Last active April 29, 2024 14:55
Script to install PostgreSQL 13 and PostGIS 3.2 on fresh Amazon Linux 2
#!/bin/bash
# Script to install PostgreSQL and PostGIS on a fresh Amazon Linux instance
# Installing from source:
# - GEOS
# GEOS 3.10+ requires CMake 3+, not readily available on Amazon Linux 2.
GEOSVER=3.9.2
GEOSURL=http://download.osgeo.org/geos/geos-${GEOSVER}.tar.bz2
# - PROJ (GDAL requires 6+; 6.2.1 is the last to use SQLite 3.7; 6.2 had build issues, so 6.1.1)