Skip to content

Instantly share code, notes, and snippets.

View wtho's full-sized avatar
🌌
look up at the stars, not down at your feet

wtho wtho

🌌
look up at the stars, not down at your feet
  • Bengaluru, India
View GitHub Profile
@wtho
wtho / def.ts
Last active December 27, 2022 11:05
Optional Attribute Type Definition as inline object
/**
* Definition of arg fields for typesafe event handling.
*
* @example
* {
* parameters: 'param1' | 'param2'
* arguments: 'arg1' | 'arg2'
* }
*/
interface ParameterArgDefinition {
@wtho
wtho / fading-dialog.css
Created April 5, 2022 09:48
HTML <dialog> fade-in and fade-out
dialog,
dialog[open]::backdrop {
visibility: hidden;
opacity: 0;
transition: visibility 0s linear 0.5s, opacity 0.5s linear;
}
dialog[open].fade-in,
dialog[open].fade-in::backdrop {
transition-delay: 0s;
@wtho
wtho / range.ts
Created April 3, 2022 19:15
range.ts
const range = (length: number) => Array.from({ length }, (_, i) => i)
// JS version
const rangeJs = length => Array.from({ length }, (_, i) => i)
@wtho
wtho / error-animated.svg
Last active March 15, 2021 13:51
tumbleweed
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@wtho
wtho / v3.vuejs.decorators.prop.ts
Last active October 12, 2020 08:21
v3.vuejs.decorators
import { Options, Vue, createDecorator } from "vue-class-component";
import { ComponentPropsOptions } from "vue";
import 'reflect-metadata';
type PropOptions = ComponentPropsOptions;
type Constructor = {
new(...args: any[]): any
}
@wtho
wtho / compile-test.js
Created December 11, 2019 13:50
Simple TS Decorator compilation
const ts = require('typescript')
const toCompile = `
import { SomeDecorator } from 'fictional-decorators';
class Compilee {
constructor(@SomeDecorator() param) { }
}
`
const compiled = ts.transpileModule(toCompile, {
@wtho
wtho / app.component.ts
Created December 8, 2019 23:57
Typed Reactive Angular Forms
type Status = 'valid' | 'invalid';
@Component({
selector: 'app-component',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
profileForm = this.fb.group({
f1: [''],
@wtho
wtho / !no-class-id-serializer.md
Last active March 28, 2019 11:23
DOM element rendering without Angular's class ids

Quick Install

  • npm install --save-dev --save-exact pretty-format@24.0.0
  • copy DOMElementNoClassIdSnapshotSerializer.js to your project folder
  • add './DOMElementNoClassIdSnapshotSerializer.js' to snapshotSerializers in your jest config

Problem

Angular does create HTML for components like this:

<h1 class="ng-tns-c1-0">
 app works! 
@wtho
wtho / cvimrc.js
Last active March 28, 2019 10:16
cvim config
let blacklists = ["http://localhost*","http://192.168.2.131/*","https://localhost*","https://pvmonitor.ml/*","https://stackblitz.com/*","https://*.stackblitz.io/*","https://emulatoronline.com/*"]
let defaultengine = 'duckduckgo'
blog:how-to-become-stronger-everyday,ts:2017-12-14