Erik Vullings erikvullings

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

A double range slider for mithril

You can specify the minimum and maximum value, the selected range ([min: number, max: number]), and an optional rangeMin distance between the two. A playground is available in [Flems](https://flems.io/#0=N4IgzgpgNhDGAuEAmIBcIB0sxhAGhADMBLGXVAbVADsBDAWwjUwAt56p8RYB7axfsxABfPDQZN0GeLgK9+EQegD0ygATF6ABx4AneGvp41wNQDFaCPQE8Awj219F8YwEF48XcQBGAV0RgasJqhLoOagDk9MTwLF5QEQDcADrUqRAAHjr6avDWWhBqALLE1EW0GWoAvGoU0dSoatS+9N4Qusb0FY3Nre0Auilp1JnZBqWIuoSWhQAiPL7eMABKtNQA5hAAylDESO3unoGZAkiBh15+ASapamrKAFQPxaWaLWoAbrRQvoUPyrdDKUei02rohndHs9yhk3vRPt9fmp-oCuhkQX1wYCoWottA4IgkGpdGtNsiAdQ7iSNhAAPyNEplCoQ+5PXGILRqMDEABeEGMAAF9tNfFADABGcmAsAc+lNUHtFk4xlwhE-QpteAAdwgii5+IQyCB1FVayJaLhxggGHWGFyPDUtA+PD2uRYhV8kF0+pgCFK60dxNJhR4hDUAFYALThwXC2iiiVSylBmmMuW9MFKtkAeWosBYwbUBeoSBg3pRyb4+eDcoAFNTNgzSjCAJTVAB8nxdSCGwlS6SyegM8hlanmixWwZ2e3ajQsVl0dgcOhG-AAPOOlhBVjTp-tdBcwJ2arW21VO8BATADA2IABRGCMfiNAASABUigAZLZaNYPiBPvALLXsaO6bAAktQWj+K+H6fpB0HwP+gHARABhomBEAITBajvl+2FIY+zioehpQAGqIlhUE4Xh8HUYRAHEVeaGGBU

Mithril Donut chart component

Creates a simple donut chart in mithril (v2.2.2) using TypeScript, including a legend and tooltips. A playground is provided in [flems](https://flems.io/#0=N4IgtglgJlA2CmIBcAWAbAOgMwEYA0IAzvAgMYAu8UyIG5hIBAZhAg0gNqgB2AhmIiS0AFuTCxGIUgHtulOTRABfPD36Da9STLnwFQgPQGABBDAAHaQCdyxsHmPBjAMV4VrATwDC0i7L22SsZMVr7GAOSQ5MJWrOEA3AA63MkQulZMbvDGACKyAK7kXsK8NgDKsBCk2cDJxvXGsLwARiRIxoTksdwA5kncDcYAbryw+fDt3PlgrVb9gzKw1u2d3X3JSsmp6ZnVuQVFJTYAguRdhI51DVC85LzteVOHpeQVVfAcALrzDWnc8FYAEq8KAQfKESbTWY-erSQoA4Gg8GQmYA-qbFLcHSdfZPYovdqudxWby+Sz-OQAHkehXxJzOVkIAD5jABeS4DBpDCDwADu7QAFE5budjEoAJRslm1TmDerY2xOG53Bx-BEgsGEBxwyhAjXgsVs4wixn9K5y4xGYxeUakfJNSjGcjSO6wYajcbmuUKp0u0YANQ92XZyt4GCsVHy1QFArcpAchEq1UlrJZceMAGoOkn4BgRmN4A4AAzis2yuVWm2wO0O7K8XpsL2DBC2TovY4N4PGIswuUt4x6KAdnoII09psNH2lUgQxzGKArLppHoOFiwWCLtYOJqtDcdJe9Bz58Yo2YOO1ge23CBDeCBgungFir5Gr69wahjBMawAUTcwgFRN3ilDkLQtKdOyNQCczzINLV9V173GSUACpjCwNBx3LMCB24IdIPZNsTkgrN6xHeAyxwhZZBxIjyGHBBESguiGOyABaYwAE4S2MNCAFlbmEDAAAUAEl4JwAAOLCqMnGjbEHVimPZAVFM

Introduction

My camera photos on my phone all end up in one big folder. I wanted to sort them by date taken in a simple format year-month format, YYYY-MM. I tried the application PhotoMove, but unfortunately, this simple requirement is only available with the PRO version, so instead, I've asked ChatGPT to create a PowerShell script for me.

Usage:

Download the Windows version from exif tool and unzip it into a folder. Make sure that the name is exiftool.exe (in my case, it had a weird name exiftool(-k).exe so rename it if that's the case).
Save the PowerShell script you can find below in the same folder.
Open a PowerShell window (WIN+R and enter powershell)
Run the script ./sort.ps1

Create Docker volume

When moving from a local development environment to the cloud, e.g. Docker swarm or Kubernetes, you often need a way to access local files. However, in the cloud your local file system cannot be accessed anymore, so you need a way to copy your local files to a volume and mount that instead. This is the purpose of the script. You supply it with the volume name (e.g. schemas) and the local folder containing the schemas, e.g. ../../schemas, and a schemas volume is created, containing all data that is copied into the container.

./create_volume.sh schemas ../../schemas

	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);

	POSTGRESQL_PASSWORD="PASSWORD"
	POSTGRESQL_POSTGRES_PASSWORD="PASSWORD"
	KEYCLOAK_ADMIN_PWD="PASSWORD"
	HOST="LOCALHOST"
	EMAIL="YOUR.EMAIL"

	---
	version: "3.3"

	networks:
	icem-net:
	driver: overlay
	attachable: true

	services:
	reverse-proxy: