Skip to content

Instantly share code, notes, and snippets.

View zwacky's full-sized avatar

Simon zwacky

98 followers · 42 following
View GitHub Profile
@zwacky
zwacky / font-formats-comparison.csv
Created November 11, 2021 07:33
Font Format Release year Browser support File size Score
OTF/TTF 1985 98.6% 57 kb 69/100
SVG 2001 19.4% 113 kb 20/100
EOT 2007 0.87% 27 kb 43/100
WOFF 2009 98.6% 30 kb 88/100
WOFF2 2017 96.8% 23 kb 98/100
@zwacky
zwacky / rolling-28-day-window-T+28
Created August 10, 2021 08:35
rolling 28-day window T+28
Days | +1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28
-------------------------------------------------------------------------------------------------------------------------------------------------------
Daily CLS | 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0
Average | 0.9 0.8 0.8 0.8 0.8 0.8 0.7 0.7 0.6 0.6 0.6 0.5 0.5 0.5 0.4 0.4 0.4 0.3 0.3 0.3 0.2 0.2 0.1 0.1 0.1 0.0 0.0 0.0
@zwacky
zwacky / rolling-28-day-window-T+0
Created August 10, 2021 08:34
rolling 28-day window T+0
Days | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28
-------------------------------------------------------------------------------------------------------------------------------------------------------
Daily CLS | 1.0 1.0 1.0 1.0 1.0 1.0 1.0 1.0 1.0 1.0 1.0 1.0 1.0 1.0 1.0 1.0 1.0 1.0 1.0 1.0 1.0 1.0 1.0 1.0 1.0 1.0 1.0 0.0
Average | 1.0 1.0 1.0 1.0 1.0 1.0 1.0 1.0 1.0 1.0 1.0 1.0 1.0 1.0 1.0 1.0 1.0 1.0 1.0 1.0 1.0 1.0 1.0 1.0 1.0 1.0 1.0 0.96
@zwacky
zwacky / find-last-modified-files.sh
Created September 28, 2020 09:48
Find the last modified files recursively in a folder
find . -type f -exec stat -f "%m %N" "{}" \; | sort -nr | head
@zwacky
zwacky / fc-attribute-inheritance.js
Last active November 11, 2019 22:05
How to let the functional component inherit properties like "class"
// creating our functional component
<script lang="tsx">
Vue.component('MyFunctionalComponent', {
functional: true,
render: (h: CreateElement, ctx: RenderContext<any>) => {
return <img {...ctx.data} />
}
}
</script>
@zwacky
zwacky / render-function.tsx
Created October 26, 2019 08:35
render(h: CreateElement, context: RenderContext) {
return (
<div {...context.data}>
<h1>Hello World</h1>
</div>
);
}
@zwacky
zwacky / render-function.ts
Created October 26, 2019 08:25
render: (createElement: CreateElement, context: RenderContext) => {
return createElement(
'h' + this.level, // tag name
this.$slots.default // array of children
)
}
@zwacky
zwacky / template-functional.vue
Created October 26, 2019 07:24
<template functional>
<button
class="btn btn-primary"
v-bind="data.attrs"
v-on="listeners"
>
<slot/>
</button>
</template>
@zwacky
zwacky / toggleClass.directive.ts
Created October 2, 2018 16:48
Vue directive like :class="{ 'css-class': isTrue }" that works with Ionic 4
/**
* usage:
*
* <AnyComponent v-toggleClass="{ 'any-component--active': isActive }"></AnyComponent>
*/
// toggleClass.directive.ts
import { DirectiveOptions } from 'vue';
function toggle(el, classKeys: {[key: string]: boolean}) {
@zwacky
zwacky / comma-operator.js
Last active June 12, 2018 22:18
// the 3 line reduce callback
[{key: 'USA', value: […]}, {key: 'Germany', value: […]}, {key: null, value: []}]
.filter(item => item.key)
.map(item => {
item.key = item.key.toUpperCase();
return item;
})
.reduce((accumulator, item) => {
accumulator[item.key] = item.value;
return accumulator;