Erik Vullings erikvullings

TabPills

Create a tab-like experience using 'pills', based on this CodePen.

m(TabPills, {
  tabs: [
 {

WSL2 Docker Swarm Setup Scripts

This repository contains PowerShell scripts to help configure and run a multi-node Docker Swarm cluster using WSL2 on Windows 11, without relying on Docker Desktop. If you need GPU access in your swarm, please read Tom Lankhort's gist.

These scripts automate:

Port forwarding using netsh (TCP and UDP)
Generation of config.toml for wsl2proxy
Service installation and startup of wsl2proxy
Docker Swarm initialization (manager)

Emoji component for mithril

A simple emoji component that you can add to your page. It converts a positive score to a happy green face and a negative score to a disappointed red face.

For a demo, see [here](https://flems.io/#0=N4IgzgpgNhDGAuEAmIBcIB08wgDQgDMBLGHVAbVADsBDAWwjU2zxFgHsrEumB6XgARE6AB3YAneALoCC49jIA6IOkXgALcSWUBuRVX38BAUTrsAVkQEBaASJqSB7AnZob9HKmCkQzlsAIAvALA+gICvhZEAIyoYeECygCyAMwADAAsGAAcAhkArFnZsGnW+QBMOXkpGOXWAJwAbAJNDY1gTdW1Lc2tGTXlPW1DfQNtbQBeSdnR2RgZAtnZ5bDWAOzdNY3W0VkLRdblafN5OTu5pSkH9Rjb-bWHjfOHc9llr9bZG9ut0YVnrUazVK0XKzRSGzqfyKQ1BAnKGWsKRu4K21kaW3h0VuYCRaORt0O2O2GNusAyewa2MG0QJUPyaXhGRBDIE0TSxwubPq+VuAnyryZjL+aQAwtkKhhGdkMtTFhlKgsvtLZicluUJnQdjc6ikUtTVpKLuN7nVWk0wKbhubes1TT0hvabT0JspcPFIpZynEqAlEiAkszOQIUgKcrAjQJGZ0nbao-zKm9Y9btpHSqMHs7SpGrZ0bZrkXMFmkI4n4zGBg7OoyjdZk3nU2X03cxlmymXc7bJklGmlsQs1hT5hGsvVrBh8vVomzohtck8FrMaozyq8oDVF7VYOVedK+Sk5ikQ09p6u+b3CRt8vDeSkkaOQ3M1mUbvUQ8dolBx5VLs8DTt8l5

Thermometer

A simple thermometer component that you can add to your page. It converts a Likert scale score to a fill percentage (0% is empty, 100% is full), and it varies the color between blue and red.

For a demo, see [Flems](https://flems.io/#0=N4IgtglgJlA2CmIBcB2AbAOgBwEYA0IAzvAgMYAu8UyIG5hIBhpATgPayzIDaADHrwC6BAGYQEDJN1AA7AIZhESWgAtyYLgVJsZlXTRABfPLIVLa9RiG274+5QHoHAAghgADmxblnYZyPY-AHJIchUWcSCAbgAdGTiIWxYROVJ4ZwAVFXgWMDZFShYAGQgAaxzyAEFycgiAIwBXSkJnYDjnZwA3OVgG+CRnGQawOpzYmQ6wOQAPAH4BoZGxuMM4m0IfLJy8gpyS8u8BsAwAMVTyLwBPAGF8zxk7cgAeLdz8+EL9iuraiEbmgB8zgAvM4ABQAShBQLaE38DRkFAgOmc7hyaV0cgA5vAMmwAEpyGQ4sFolgY8jY-qDYajFgQha0nKtdrOJzOEoPOQsVxJTywOTkZETEReMANAVIVnsljwQgSnygjbc8gANR6fWcAGpwXYoOreukALTOZXeA19KEAKnBZIpVLZzhwvF4ELirPWPjNao16VBRoAzLwomyXM7eABSD06DbOPUWv3OACsABZgx1Q85I+64bLyA0WBNvQntbqZPrfc4TcXfdbwTgq7b0Y8HWGXRCIeNVvFcx8CxNYRmuhB4AB3AZg4DOQW1QgDKfdQ14XwzEHJ5yGDdQ4Ew1lDz2o5uYnFrsGLzUuKbTOvh8Z7jPs26wLzOLEsORQEe6fyBZx1Q3OBcziylA94dAeIFrgAsoKKgYOwCJQGCpJHpSJ5tq6zg2gATEmSadmBzgHv+mqgjBYTwWwiHIQ2JooeSL

Highlighter

TypeScript highlighter that takes a data object, and applies a highlighting function to selected property values.

I needed to render a data object representing an article. Before rendering it to HTML, I wanted to mark certain parts of the text with a background color.

Create string or regex-based highlighters descriptions
Create a factory function that takes these highlighters and converts them to functions that will wrap matching text with an HTML mark element and background color. It returns a highlighter.
Use the highlighter to convert the original data object to a data object with the same shape, but where matching text is highlighted.

Probeer het uit op [flems.io](https://flems.io/#0=N4IgzgpgNhDGAuEAmIBcIB08wgDQgDMBLGHVAbVADsBDAWwjU2zxFgHsrEumB6AKn4ACAKIAPegAcYQ9gSEBXMESoBzIfAAWEIQAUAIgHkA0kICCugJJDIAJwBuRWBFw32C286Gb48SWFReXlUiLQUAIwwOOl4DE14odlgaeCIIO3sIW14AdyIAayJeC0sAWgAZJJS0jKyhfl4AHSpmiDFJdlt4IRVEWwIaL0tdJHZ8gGUIGk9NACV0hShu4GahIVt0jqpIVCEVqjW1qgU6ADF3KiRd47pwrIBuVcOweGn4a5O720eDw7oaMTjDgbD63B5PNajWABcy2Ww0ACeAB59odDuFbJxdgByABCZgA4tihAAfITYgByAHVccSyS9bCpVD80WscuxONIaCkwBwkBBdgymSzWfAEZIBeSaEgNmA6eSOi8+RB5dichBVNiRWj2ZyoNzsLR6IL4Iy1NrDnkAFb5ZUms3MiGHTQKIhgAD6VCW9uFTrW7AlVHC0yyrroiDFEp95r9QnCCg88CNdGjjt+aNUEAYEC4cHY-NTFrWtiQBHdkCmUDA7ELsfVWVUNEyydr6eepoNyfdmVs+U67xspt9bbWRCug4dRaEmb7kglUCQ7olngg0FbrOnWdXuZbE+HG-jibte5jI6E1vyu6Fp43Y5zqWIyVSkuvaY3AZzwY2tjDiHdY-XVkchSLJeU0Gh-CvIcb1ZSRMUcKhYDSY9XynRV4BQ6C31g+CVCQnNuRTE9sLRZwuExO93SgKBALRG4GHhGhLldJAmX-cdULrEDbDAiDeXzF8sKnaVZQrWxg2mdhwitOB4HY2jnVdMB6KyBS1jg9gEPwmgCD7LomTUoQyNNdhKJLQyGU7QiLOBQTJydABfAA+EUHJ+BzmmaARhHEDsEDADR2SEG4vgCghMToIQaE3ANTK4eomkQzgXiEDpenmTMxCEABeIRYkMSwKQAFUaRoAAoyv

Introduction

Click anywhere in the SVG grid and start a new line. Click again, and the line will be drawn. Try it out in the [playground](https://flems.io/#0=N4IgzgpgNhDGAuEAmIBcIB08wgDQgDMBLGHVAbVADsBDAWwjUwAt46o8RYB7KxPpiAC+uavUbosOfDz4QB6AgFcqCIrwAEsAE4QaiAJJztNNQDcIAcW1EkAZQBqlgBQB3VBqpK6AIwjbcDWYPL19-QJokJCJ4dVooAFEYBj4wAH4PR0skiBT4cgBdAEpMpyycvI1gAB0qDS1eMHgNMDMAcwA5Ow0AXg1qkFZ4AAdUAHox1ymMVwBmDG5tNrGAJgAGDbHWtoGAblr62SataCg7IgAvCF6NAEY1-bqGqmPXW3hmG9cNACoTqDOlwgj0OjWazAgRDarBunz+sFO5yujwOGgmGgAwrp9NcshpoLl5PBUUdmtsbkhuLBvESMDo9IgKkSus5tl1AgNtgMiiCWu0MJB4ABBeDwGw+JSIZwDN5ID4DQKyj5Ybh2MVEKhtZxFHmo7YCiDC0XiyUQaWDSHQ4l4IKW1gqtU2TXa3VPfVNACeMAwPlMAGs2tpuCokBjuFBFjcZcwYhA9rVUeisQzroHbKiCJHnDBmgAPG4PDT5gA8fSVzF2RY0AGo+giAUiIEUqqjQS9mlANdc+pTqXk6djGclmXZWe12f0QJ2qHGQK76vVpxADUb1RKpQNc7cFUWHernTreYuuyuRWvTeaPdubQM1tyjxol6fjUR12bNysd7m906tYfW4+J6CmeJobiAHqfjaEJQva8Cqvuf7zguT7AS+b7mk0QZ+rOHJTjB8A+FASizkhx4zs+55gZh3DYQAtOWO4DNepF8m0GA0MMwzyKGMZQEg2ZdkhQgJk8mbaBo2aGhoHoFpWMmlra+FyTWdaIkCzY1E8bbHEuFJUjSfADimTJ8Cy


	/**
	* Debounce a function, i.e. wait for a certain amount of time before executing the function.
	* Often used when frequent edits would trigger a function multiple times, you can use this to
	* wait for a certain amount of time before executing the function.
	*
	* @param func The function to be debounced.
	* @param delay The delay in milliseconds for the debounce.
	* @returns A function that debounces the original function.
	* @example const debouncedFunc = debounce(myFunction, 100); debouncedFunc(args);

	services:
	traefik: # Your Traefik service name as defined in your compose file
	image: traefik:v3.3.6 # Use the specific version
	command:
	# Enable the API and Dashboard without TLS
	- --api.insecure=true
	# Listen on the 'web' entrypoint (HTTP) on the new internal port 8091
	- --entrypoints.web.address=:8091
	# Listen on the 'dashboard' entrypoint on the new internal port 8092
	- --entrypoints.dashboard.address=:8092

	import { registerPlugin } from 'mithril-ui-form';
	import { searchSelectPlugin } from './search-select-plugin';

	// Register plugin under the name `search_select` or any other name of your choosing.
	registerPlugin('search_select', searchSelectPlugin);