Skip to content

Instantly share code, notes, and snippets.

View padcom's full-sized avatar

Matthias Hryniszak padcom

46 followers · 8 following
View GitHub Profile
@padcom
padcom / Example.ce.vue
Last active November 7, 2024 08:35
Example how to use `defineModel()` and `useHost()` in Vue.js 3.5 in a custom webcomponent
<template>
<!--
First things first, the `:value` cannot be `v-model="value"` because it would
break reactivity. It's the same as assigning things directly to `value.value`
and as explained below, assigning the value needs to be done through the host
element (`host.value = '...'`).
Secondly, the `<select>` element emits its own `input` event that bubbles.
Unfortunately, the event is disguised under the custom element, and not the
`<select>` that actually triggered the value. This is due to the `shadowRoot`
@padcom
padcom / index.mjs
Created April 17, 2024 09:33
Streams using async generators
import { pipeline } from 'stream/promises'
const sleep = ms => new Promise(resolve => setTimeout(resolve, ms))
const colorsGenerator = async function* () {
const values = [ 'yellow', 'orange', 'red', 'blue', 'purple', 'green' ]
for await (const color of values) {
yield color
await sleep(1000)
@padcom
padcom / requirements.md
Created November 24, 2023 16:05
Requirements
@padcom
padcom / README.md
Last active September 20, 2022 23:54
A command that deletes all node_modules folders recursively.

Cleaning up node_modules

Working with node.js is great. NPM may not be the best package manager on the planet, but it is good enough. However, if you have a number of projects on the disk then the copies of modules keep piling up...

This command does the cleaning. It's interactive!

@padcom
padcom / index.js
Created March 16, 2022 23:34
Utility function to create a new array with elements being initialized by calling an initializer
/**
* Create an array by calling an initializer on each element
*
* @param length {Number} length of the created array
* @param init {Function} callback to call on each element of the array
*/
function array(length, init = index => 0) {
return Array.apply(null, { length }).map(Function.call, init)
}
@padcom
padcom / index.html
Last active February 10, 2022 16:50
Example completely custom Vue 3 component with contenteditable and v-model support
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
box-sizing: border-box;
@padcom
padcom / comparison.md
Created January 23, 2022 14:56
Comparing node.js cluster with docker swarm on Linux (Linux 5.13.0-23-generic #23~20.04.2-Ubuntu SMP x86_64, Intel i7-11700k)

First test is done using Docker Swarm configured so that the demo_web service runs in 16 copies. This is supposed to output the maximum performance because each single-process and single-threaded (as node.js is) would be able to fully utilize the assigned CPU

$ siege http://localhost:5001
** SIEGE 4.0.4
** Preparing 25 concurrent users for battle.
The server is now under siege...^C
Lifting the server siege...
@padcom
padcom / .dockerignore
Last active February 1, 2021 03:30
Creating even smaller docker images with web applications
node_modules
dist
.git
@padcom
padcom / parts.txt
Last active November 8, 2020 16:42
Part list for Pico 3D printer
Construction parts:
4x 2040 V-Slot profile 300mm (https://www.v-slot.pl/profile-aluminiowe-vslot2040)
1x 2020 V-Slot profile 250mm (https://www.v-slot.pl/profile-aluminiowe-v-slot2020)
1x 2020 V-Slot profile 283mm (https://www.v-slot.pl/profile-aluminiowe-v-slot2020)
1x 2020 V-Slot profile 160mm (https://www.v-slot.pl/profile-aluminiowe-v-slot2020)
2x Angle Plate Corner Brace Flat T Shape (https://www.aliexpress.com/item/32839448854.html)
12x 2020 Corner Bracket Right Angle (https://www.aliexpress.com/item/33062886463.html)
43x block M5 T-nuts 2020 (https://www.aliexpress.com/item/32853189777.html)
12x drop-in M5 T-nuts 2020 (https://pl.aliexpress.com/item/33014140496.html)
@padcom
padcom / index.html
Last active October 14, 2020 13:15
Testing with Cypress (https://youtu.be/NJpB047yp9s)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Todo</title>
<script src="https://unpkg.com/vue"></script>
<style>
.todo {
cursor: pointer;