Skip to content

Instantly share code, notes, and snippets.

View Tahul's full-sized avatar
🪐
coding from outer space

Yaël Guilloux Tahul

🪐
coding from outer space
417 followers · 86 following
View GitHub Profile
@Tahul
Tahul / directive.ts
Created March 27, 2021 13:38
[Vue 2 & 3 Typed Directive] A typed directive compatible with both Vue 2 & 3 using vue-demi. #vue #vue2 #vue3 #directive
import { Directive, DirectiveBinding, VNode } from 'vue-demi'
export const directive = (): Directive<HTMLElement | SVGElement> => {
const register = (
el: HTMLElement | SVGElement,
binding: DirectiveBinding,
node: VNode<
any,
HTMLElement | SVGElement,
{
@Tahul
Tahul / vue-use-sound-basic.vue
Last active January 9, 2021 15:05
[vue-use-sound basic example] vue-use-sound basic example #vue #vue-compositon-api #vue3 #sound #audio
<template>
<button @click="playButton" />
</template>
<script>
// NPM
import useSound from 'vue-use-sound'
// Assets
import buttonSfx from '@/assets/sounds/pop-down.mp3'
@Tahul
Tahul / a_context.ts
Last active January 6, 2021 00:13
[React Typed Global Context] A sample of a global context hook written in TypeScript #react #hooks #context #typescript #reducer #action
import React, { Dispatch } from 'react'
import reducer from './b_reducer'
// Typings
export interface ContextDefaultState {
name: string | null
}
// Defaults
export const contextDefaultState: ContextDefaultState = {
@Tahul
Tahul / myTestSuite.test.js
Last active August 3, 2022 22:25
[Jest Reset Dom After Each Test] A simple snippet to reset the JSDOM after each single test #jest #reset #dom #jsdom #tests
describe('my test suite', () => {
afterEach(() => {
document.getElementsByTagName('html')[0].innerHTML = '';
});
it('your test here', () => {
document.getElementsByTagName('html')[0].innerHTML = 'Your dom manipulation here';
});
@Tahul
Tahul / netlify.toml
Last active January 4, 2021 00:55
[Redirect Netlify Functions To `/api`] Simple snippet for netlify.toml to redirect /.netlify/function/:functionName to /api/:functionName #netlify #redirect #api #functions
# Taken from Netlify Community answer from Luke (Support Engineer @ Netlify)
# URL: https://community.netlify.com/t/trying-to-redirect-from-api-endpoint-to-netlify-functions-servers-endpoint/7609/10
[[redirects]]
from = "/api/*"
to = "/.netlify/functions/:splat"
status = 200
force = true
@Tahul
Tahul / Vue transitions with JS.vue
Last active January 6, 2021 00:01
[Using Vue transitions with JS] Just a plain component showing how to use Vue <transition> components to animate using JS. #animation, #vue, #transitions
<template>
<transition
:css="false"
@before-enter="beforeEnter"
@enter="enter"
@after-enter="afterEnter"
@enter-cancelled="enterCancelled"
@before-leave="beforeLeave"
@leave="leave"
@after-leave="afterLeave"
@Tahul
Tahul / MacOS Enable Or Disable Dock.sh
Last active December 22, 2020 00:46
[MacOS Enable Or Disable Dock] Simple command aliases to toggle MacOS Dock. #macos #terminal #dock #toggle #alias
# This is intended to be added inside a sourced file in your shell, such as ~/.bash_profile.
# If you want to use the command once, you can copy the text between the quotes inside your terminal.
# Disable dock alias
alias disable_dock="defaults write com.apple.dock autohide-delay -float 1000; killall Dock"
# Enable dock
alias enable_dock="defaults delete com.apple.dock autohide-delay; killall Dock"
@Tahul
Tahul / ThreeJS TypeScript GLTF GLB Scene.ts
Last active August 10, 2021 06:29
[ThreeJS Typescript Simple GLTF/GLB Scene] A simple GLTF/GLB scene loader using TypeScript. #threejs, #gltf, #glb, #loader, #typescript
import {
PerspectiveCamera,
DirectionalLight,
HemisphereLight,
Scene,
WebGLRenderer,
Color,
Clock,
} from 'three'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'