Skip to content

Instantly share code, notes, and snippets.

View simonhermann's full-sized avatar

simonhermann

6 followers · 43 following
View GitHub Profile
@simonhermann
simonhermann / formDataToObject.ts
Last active September 26, 2025 08:39
converts native FormData to obejct while preserving non-unique keys from multi-value fiels like checkboxes or multiselect
export type FormDataObject = Record<
string,
FormDataEntryValue | FormDataEntryValue[]
>;
/**
* converts native FormData to obejct while preserving non-unique keys from multi-value fiels like checkboxes or multiselect
*/
export function formDataToObject(formData: FormData): FormDataObject {
const obj: FormDataObject = {};
new Set(formData.keys()).forEach((key) => {
@simonhermann
simonhermann / setSequientialFocusStartingPoint.js
Last active July 11, 2025 21:06
Set sequiential focus starting point via js. E.g. when opening modal or using hash-links in SPA --- https://github.com/whatwg/html/issues/5326
// there's no Browser API yet, that allows setting it via JS
// https://github.com/whatwg/html/issues/5326
// stick to native behaviour with href="#id" where possible!
// apparently best solution for now, use only when there's no other way.
// Still hacky and far from perfect.
// credit Rich Harris
// https://github.com/whatwg/html/issues/5326#issuecomment-1150090942
function getFocusStartPoint() {
@simonhermann
simonhermann / events.json
Last active July 6, 2025 23:25
testing gist as simple cms for 11ty
[
{
"date": "2025-11-03",
"event": "Concert 1",
"location": "Location 1"
},
{
"date": "2025-11-04",
"event": "Concert 2",
"location": "Location 2"
@simonhermann
simonhermann / StorybookTestElementOutsideCanvas.stories.ts
Last active May 2, 2025 07:54
Storybook Test: target elements outise of canvas
// usualy we do:
const canvas = within(canvasElement);
// but some things are rendered outside of .storybook-root, e.g. via portal directly in body. These can be targetet via:
const body = within(canvasElement.ownerDocument.body);
@simonhermann
simonhermann / addons.md
Created February 4, 2025 11:37
Browser Addons/Extensions

Browser Addons & Extensions

General

  • uBlock Origin
  • Privacy Badger

Web Dev

  • a11y.css
  • web developer toolbar
  • VisBug
@simonhermann
simonhermann / oneof.ts
Created September 16, 2024 07:06
OneOf Helper Type
// source:
// https://www.youtube.com/watch?v=52vHiczZ3Bc
// https://github.com/typed-rocks/typescript/blob/main/one_of.ts
type BaseMessage = { id: string, timestamp: number };
type TextMessage = BaseMessage & { text: string; };
type ImgMessage = BaseMessage & { imgPath: string };
type UrlMessage = BaseMessage & { url: string; };
@simonhermann
simonhermann / useAutoClose.ts
Last active September 9, 2024 15:07
React useAutoClose Hook (triggers callback on user interaction outside provided element)
/*
* I recommend using a more mature solution like https://floating-ui.com/docs/useDismiss for advanced use cases
*/
import { useEffect, useCallback, type RefObject } from 'react';
/**
* triggers callback on user interaction outside provided element
@simonhermann
simonhermann / rem-converter.js
Last active September 19, 2023 12:17
script to automatically convert project from 10px to 16px root font size
// @ts-check
const fs = require("fs");
const glob = require("glob");
// Regular expression to match the pattern (number followed by "rem")
const searchPattern = /(\d+(\.\d+)?)rem/g;
// Function to calculate the replacement value
function calculateReplacement(match) {
const originalValue = parseFloat(match);
@simonhermann
simonhermann / RSS-subs-work.opml
Last active March 22, 2023 16:46
My RSS subscriptions in "Tech" and "UX/UI" Categories
<?xml version="1.0" encoding="UTF-8"?>
<opml version="1.0">
<head>
<title>My subscriptions in feedly</title>
</head>
<body>
<outline text="Tech" title="Tech">
<outline type="rss" text="RedMonk Tech Events (uploads) on YouTube" title="RedMonk Tech Events (uploads) on YouTube" xmlUrl="https://www.youtube.com/playlist?list=UUaUtAK8xECTkETCYivJegeQ" htmlUrl="https://www.youtube.com/playlist?list=UUaUtAK8xECTkETCYivJegeQ"/>
<outline type="rss" text="Publikationen (Webentwicklung, Webdesign, Barrierefreiheit, Usability) · Jens Oliver Meiert" title="Publikationen (Webentwicklung, Webdesign, Barrierefreiheit, Usability) · Jens Oliver Meiert" xmlUrl="http://meiert.com/de/publications/publications.xml" htmlUrl="https://meiert.com/"/>
@simonhermann
simonhermann / gist:71debcf08ad4b70d327b77f8f5c510f3
Created September 21, 2020 10:42 — forked from ayamflow/gist:b602ab436ac9f05660d9c15190f4fd7b
Safari border-radius + overflow: hidden + CSS transform fix
// Add on element with overflow
-webkit-mask-image: -webkit-radial-gradient(white, black);