georapbox

import { computed, signal } from "@preact/signals-core";
import { type SignalsTemplate, render } from "./signals-template";
import { SignalsWebComponent } from "./signals-web-component";

const tagName = "x-counter";

class Counter extends SignalsWebComponent {
  counter = signal(0);
  counterStr = computed(() => this.counter.value.toString());

georapbox

export function mergeRefs(refs) {
	return (value) => {
		refs.forEach((ref) => {
			if (typeof ref === "function") {
				ref(value);
			} else if (ref != null) {
				ref.current = value;
			}
		});
	};

georapbox

class PathMe {

  moves: string[] = [];

  constructor() {
    this.moves = [];
    return this;
  }

  moveTo(x: number, y: number) {

georapbox

// Credit to Michal Mocny (https://twitter.com/mmocny)
//
// Copy and paste this into the console and click around to see all interactions, whether they would pass INP,
// and if you expand the entry you'll see the debug breakdown information.
//
// This is basically the same as the Core Web Vitals extension does: https://web.dev/debug-cwvs-with-web-vitals-extension/

const valueToRating = (score) => score <= 200 ? 'good' : score <= 500 ? 'needs-improvement' : 'poor';

const COLOR_GOOD = '#0CCE6A';

georapbox

function logMutation(mutation) {
    console.log(mutation);
}

const mutationObserver = new MutationObserver((mutations) => {
    for (const mutation of mutations) {
      // Build a reason object that will let the user know what exactly happened
      let details = null;
      if (mutation.type === "attributes") {
        details = {

georapbox

/**
 * If you have your Browser Console command-line enabled[1], you can paste this string
 * in to generate an emoji representation of your tabs, which will automatically be copied
 * into your clipboard.
 *
 * WARNING: Be VERY careful with what you put into your Browser Console - don't run
 * any scripts in there that you yourself don't understand.
 * This script was written by Nicolas Chevobbe (@nicolaschevobbe)
 *
 * [1]: https://developer.mozilla.org/en-US/docs/Tools/Browser_Console#browser_console_command_line

georapbox

// Core assets
let coreAssets = [];

// On install, cache core assets
self.addEventListener('install', function (event) {

	// Cache core assets
	event.waitUntil(caches.open(coreID).then(function (cache) {
		for (let asset of coreAssets) {
			cache.add(new Request(asset));

georapbox

#!/bin/bash

for file in $(git diff --cached --name-only | grep -E '\.(js|jsx)$')
do
  git show ":$file" | node_modules/.bin/eslint --stdin --stdin-filename "$file" # we only want to lint the staged changes, not any un-staged changes
  if [ $? -ne 0 ]; then
    echo "ESLint failed on staged file '$file'. Please check your code and try again. You can run ESLint manually via npm run eslint."
    exit 1 # exit with failure status
  fi
done

georapbox

ServiceWorker for github pages

This is a ServiceWorker template to turn small github pages into offline ready app.

Why ?

Whenever I make small tools & toys, I create github repo and make a demo page using github pages (like this one).
Often these "apps" are just an index.html file with all the nessesary CSS and JavaScript in it (or maybe 2-3 html/css/js files). I wanted to cache these files so that I can access my tools offline as well.

Notes

Make sure your github pages have HTTPS enforced, you can check Settings > GitHub Pages > Enforce HTTPS of your repository.

georapbox

# install bundler in user space 
gem install bundler --user-install

# then add following lines to ~/.zshrc on Catalina or ~/.bash_profile on older:
# - to set default bundle install directory
export BUNDLE_PATH=$(ls -t -U | ruby -e 'puts Gem.user_dir')

# - to add user gem directory to $PATH
export PATH="$PATH:$BUNDLE_PATH/bin"