Skip to content

Instantly share code, notes, and snippets.

View gokhantaskan's full-sized avatar
🎯
Focusing

Gökhan Taşkan gokhantaskan

🎯
Focusing
  • Ankara, Turkey
  • 14:50 (UTC +03:00)
View GitHub Profile
@gokhantaskan
gokhantaskan / useAxios.ts
Last active February 1, 2024 12:06
Axios + Firebase interceptor for authentication
import axios, { type AxiosRequestConfig } from "axios";
import defu from "defu";
import { IS_DEV, LS_FB_EXPIRATION_DATE } from "@/constants";
import type { BackendError } from "@/lib/types/common";
import { useBearerToken } from "./useBearerToken";
export function useAxios<T, D = any>(url: string, options?: Omit<AxiosRequestConfig<D>, "url">) {
const { bearerToken, fetchIdTokenResults } = useBearerToken();
@gokhantaskan
gokhantaskan / rte.vue
Last active August 30, 2023 07:37
TipTap WYSIWYG editor | Vue 3 + VeeValidate
<script setup lang="ts">
import CharacterCount from "@tiptap/extension-character-count";
import Link from "@tiptap/extension-link";
import Subscript from "@tiptap/extension-subscript";
import Superscript from "@tiptap/extension-superscript";
import StarterKit from "@tiptap/starter-kit";
import { Editor, EditorContent } from "@tiptap/vue-3";
const {
name,
@gokhantaskan
gokhantaskan / App.vue
Last active August 11, 2023 06:49
Basic fake radio group with buttons - experimental
...
<template>
...
<RadioGroup
v-model="value"
@option-click="next" // or @change
>
<template
v-for="(item, i) in isOwnedData"
@gokhantaskan
gokhantaskan / index.ts
Last active February 11, 2023 09:50
Find the first focusable element inside a DOM element
export function findFirstFocusableElement(
element: HTMLElement | null,
tags: string = "",
{ withDefaults } = { withDefaults: false }
) {
if (!element) return;
const defaults =
"a[href], button, input, textarea, select, details, [tabindex]:not([tabindex='-1'])";
@gokhantaskan
gokhantaskan / format-balance.ts
Last active January 18, 2023 10:40
Metamask style balance formatter
import { BigNumber } from "@ethersproject/bignumber";
import { formatUnits, parseUnits } from "@ethersproject/units";
/**
* @param balance Token balance in BigNumber format
* @param decimals Token decimals
* @param fixed The number of decimal places to show
* @returns string representation of the balance
*/
export function bigNumberToTrimmed(
@gokhantaskan
gokhantaskan / useBreakpoints.ts
Last active January 17, 2023 12:29
Vue breakpoint composable
import { computed, onMounted, onUnmounted, ref } from 'vue';
export default function useBreakpoints() {
const windowWidth = ref(window.innerWidth);
const onWidthChange = () => (windowWidth.value = window.innerWidth);
onMounted(() => window.addEventListener('resize', onWidthChange));
onUnmounted(() => window.removeEventListener('resize', onWidthChange));
const bp = computed(() => {
@gokhantaskan
gokhantaskan / tippy.ts
Last active February 20, 2023 07:06
Simple Vue `v-tippy` directive
import "tippy.js/dist/tippy.css";
import "tippy.js/animations/scale.css";
import tippy, {
type DefaultProps as DefaultTippyProps,
type Props as TippyProps,
} from "tippy.js";
import type { Directive } from "vue";
const defaultProps: Partial<DefaultTippyProps> = {
@gokhantaskan
gokhantaskan / date.spec.ts
Last active January 16, 2023 14:08
testing date-related functions
/**
* @jest-environment jsdom
* @jest-environment-options {"url": "https://website.com"}
*/
import { defaultPeriod } from "../../src/utils/date";
let windowSpy: ReturnType<typeof jest.spyOn>;
describe("test date.ts", () => {
@gokhantaskan
gokhantaskan / conversion.ts
Last active March 17, 2023 20:12
CO₂ mass unit conversion
// ! Co2 always in tons
export function convertCO2Units(co2t: number): string {
const units = ["g", "kg", "t"];
let co2g = co2t * 1_000_000; // convert to grams
let unitIndex = 0;
while (co2g > 1000 && unitIndex < units.length - 1) {
co2g /= 1000;
unitIndex++;
}
@gokhantaskan
gokhantaskan / table.vue
Last active December 25, 2020 19:35
ElementUI Table with Collapse Option (Accordion Style)
<template>
<el-table
ref="table"
row-key="someKey"
@row-click="rowClick"
@expand-change="expandChange"
:data="data"
>
<el-table-column type="expand">
<template v-slot:default="{ row }">