Skip to content

Instantly share code, notes, and snippets.

View guiseek's full-sized avatar
🌱
Winners don't care what others think, the real battle is overcoming yourself.

Guilherme Siquinelli guiseek

🌱
Winners don't care what others think, the real battle is overcoming yourself.
280 followers · 244 following
View GitHub Profile
@guiseek
guiseek / main.ts
Created June 24, 2023 03:52
Tiny Observer
import {Observer} from './core/event-emitter'
const observer = new Observer<string>()
const sub1$ = observer.subscribe((value, count) => {
console.log('sub 1: ', value, count)
})
const sub2$ = observer.subscribe((value, count) => {
console.log('sub 2: ', value, count)
@guiseek
guiseek / event-emitter.ts
Created June 24, 2023 03:31
Tiny Event Emitter
type Callback<T> = (value: T) => void
export class EventEmitter<T> {
#on = new Set<Callback<T>>([])
set on(cb: Callback<T>) {
this.#on.add(cb)
}
set off(cb: Callback<T>) {
@guiseek
guiseek / main.ts
Created June 17, 2023 05:20
Youtube subtitles to text
const subtitle = segToSub(subtitles.events);
console.log(subtitle);
@guiseek
guiseek / query.ts
Last active June 12, 2023 04:55
HTML & SVG QuerySelector
export function query<K extends keyof SVGElementTagNameMap>(
name: K | `${K}.${string}` | `${K}#${string}` | `${K}[${string}]`,
parent?: Element
): SVGElementTagNameMap[K]
export function query<K extends keyof HTMLElementTagNameMap>(
name: K | `${K}.${string}` | `${K}#${string}` | `${K}[${string}]`,
parent?: Element
): HTMLElementTagNameMap[K]
@guiseek
guiseek / flood-fill.ts
Created May 12, 2023 05:57
import './style.scss'
const video = document.querySelector('video') as HTMLVideoElement;
const canvas = document.querySelector('canvas') as HTMLCanvasElement;
const ctx = canvas.getContext('2d', { willReadFrequently: true })!;
// Configuração da tela de fundo
const BACKGROUND_COLOR = [6, 6, 6]; // fundo verde
const TOLERANCE = 80; // tolerância de cor
const OPACITY = 0.7; // opacidade do sujeito
@guiseek
guiseek / handle-state.ts
Created May 12, 2023 02:46
Stte handler
let state: any
function handleState<T = unknown>(data: T) {
state = data
// const events: ((state: T) => void)[] = []
const events = new Set<(state: T | null) => void>()
return {
set(newState: T | null) {
if (newState === null) {
@guiseek
guiseek / define.ts
Created May 12, 2023 02:45
Custom Element @define Decorator
export const noop = () => null
export function pickFn<
T extends CustomElementConstructor,
K extends keyof T = keyof T
>(target: T, key: K) {
return target[key] ?? noop
}
export function define(
@guiseek
guiseek / input.ts
Created April 17, 2023 02:00
Criar formulários com decorators
import 'reflect-metadata'
type InputType =
| 'checkbox'
| 'color'
| 'datetime-local'
| 'email'
| 'file'
| 'image'
| 'month'
@guiseek
guiseek / breakout.ts
Last active April 15, 2023 04:33
Breakout
import './style.scss'
const canvas = document.createElement('canvas')
const contexto = canvas.getContext('2d')
const config = {
bola: {
raio: 10,
},
raquete: {
@guiseek
guiseek / index.html
Last active March 29, 2023 23:36
App Drawer
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,300;0,400;0,500;1,300;1,400&display=swap"