DEV Community: TK

Voice Input Killed My Keyboard Hobby

TK — Sun, 30 Nov 2025 09:24:08 +0000

Tailwindcss intellisense doesn't work in tsx file.

TK — Mon, 08 Aug 2022 00:07:31 +0000

I usuary use tailwind css with vscode. But one day, Tailwindcss intellisense doesn't work in tsx file. I configured some settings like below.

// It didn't work.
    "editor.quickSuggestions": {
        "strings": true
    },
    "tailwindCSS.emmetCompletions": true,
    "tailwindCSS.experimental.classRegex": [
        "className=\"([^`]*)" // className="From here
    ],
    "tailwindCSS.includeLanguages": {
        "javascript": "javascript",
        "html": "HTML"
    },

My solution was to delete tailwind.config.js and configure it again!!

Firestore error: Error: Value for argument "data" is not a valid Firestore document. Input is not a plain JavaScript object.

TK — Sat, 06 Aug 2022 06:52:00 +0000

Hello!!
I'm trying to use firestore as database of my service api. But it was occured error like below.

Error: Value for argument "data" is not a valid Firestore document. Input is not a plain JavaScript object.

Approach


import { DocumentData, FirestoreDataConverter, QueryDocumentSnapshot } from '@google-cloud/firestore'

export const converter = <
    AppValue extends object
>(validator?: (value: AppValue) => AppValue): FirestoreDataConverter<AppValue> => {
    return {
        fromFirestore: (snapshot: QueryDocumentSnapshot<AppValue>) => {
            let data = snapshot.data()
            Object.keys(data).forEach((key) => {
                // @ts-ignore
                if (typeof data[key].toDate == "function" && typeof data[key].seconds == "number") {
                    // Timestamp型は扱いにくいのでDate型に強制変更
                    // @ts-ignore
                    data[key] = data[key].toDate()
                }
            })
            return data
        },
        /*
        * Async Await syntax don't support!!
        *
        * Fix like below
        * toFirestore: (value: AppValue): DocumentData => {
        **/
        async toFirestore: (value: AppValue): DocumentData => {
            if (validator) {
                return validator(value)
            }
            return value
        }
    }
}

export default converter

Validator in js

TK — Sat, 30 Jul 2022 04:58:00 +0000

Hello world!!
I'm searching about validator in js and ts. So, I'm gonna write about my summary and conclution.!!

Comparing

Trends

Package	Feature	Merit	Demerit	Link
Zod	TypeScript-first schema validation with static type inference	Method chaining and easy to get ts type	Newer package	zod.dev
joi	This is almost same to zod	Have many plugins	Doesn't support static type inference	https://github.com/sideway/joi
Yup	This is almost same to zod	Have many plugins	Missing some feature, function, deep object, promise... ...	https://github.com/jquense/yup
class-validator	Validate class properties	Have many features	Code isn't clean	https://github.com/typestack/class-validator
ajv	Validate by json scheme	Enable to share schem to other languages	Not supported typescript	https://ajv.js.org/

Recommandation

If you don't validate by class

I recommand you zod.

If you want to use decorator for validation

I don't recommand you class-validator, instead of it, I recommand you some plugins.

For example, joiful. This is joi plugin.

zod

// In typescript
import { z } from 'zod'

const userScheme = z.object({
    username: z.string(),
    email: z.string().email()
})
type User = z.infer<typeof userScheme>

const data: User = {
    username: 'Takashi',
    email: 'not email'
}

// This code will throw validation error!!
const validated = userScheme.parse(data)

NextAuth: Custom user data

TK — Sat, 23 Jul 2022 07:31:06 +0000

I want to use custom user data but, I faced a trap. So I want to show you.

export default NextAuth({
  providers: [
    // ...some probiders
  ],
  callbacks: {
    async signIn({ user, account, profile, email, credentials }){
      // You cannot use spread syntax
      // user = {...[Your variable]}
      user.[Your variable] = {
        // ...some properties
      }
    },
    async jwt({ token, user }){
      // You cannot use spread syntax
      // token = {...user.[Your variable]}
      token.[Your variable] = user.[Your variable]
    },
    async session({ session, token }){
      // You cannot use spread syntax
      // session = {...token.[Your variable]}
      session.[Your variable] = token.[Your variable]
    }
  }
})

Firestore data modeling best practice

TK — Mon, 18 Jul 2022 01:20:20 +0000

This articles is progress to write

Query feature

Subcollectoin
- If we use it, we cannot delete when delete root document.
Query subcollection directly
- If you want to query subcollection directly you can use Collection group queries
- Subcollection query is as fast as root collection query

Can have 2000 fields in a document.

Articles

Videos

Get to know Cloud Firestore | Youtube play list

How to use decorator in typescript

TK — Sun, 17 Jul 2022 11:49:48 +0000

If you want to use decorator in typescript, I recommand you below tsconfig.json settings/

{
    "compilerOptions": {
        // Decorator settings
        "experimentalDecorators": true,
        "strictPropertyInitialization": false
    }
}

sk-auth redirect https... ...

TK — Sun, 17 Jul 2022 02:25:24 +0000

I tried to develop authrization with Google Oauth via sk-auth. sk-auth is library of SvelteKit like NextAuth.

If we wanna change redirect url from https to http, we can use below code.

export const appAuth = new SvelteKitAuth({
    // We can change that by protocol property.
    protocol: 'http',
    jwtSecret: import.meta.env.VITE_JWT_SECRET,
    providers: [
        new Providers.GoogleOAuth2Provider({
            clientId: import.meta.env.VITE_GOOGLE_OAUTH_CLIENT_ID,
            clientSecret: import.meta.env.VITE_GOOGLE_OAUTH_CLIENT_SECRET,
            profile(profile) {
                return { ...profile, provider: 'google' };
            },
        })
    ],
});

Firebase: How to use emulator with express.js

TK — Sat, 16 Jul 2022 07:41:21 +0000

If you use @google-cloud/firestore as firestore client and you want to use emulator, you can connect by below code

// In console

npx firebase emulators:start --project local-project-id

And

// In app.ts
import {Firestore} from '@google-cloud/firestore'

const firestore = new Firestore({
  // Firestore emulator host
  host: 'localhost:4100',
  projectId: 'local-project-id',
  ssl: false,
  eexperimentalForceLongPolling: true
})

Have a good day!!

Firebase emulatos: UI doesn't work!!

TK — Sat, 16 Jul 2022 06:11:51 +0000

Hellow!!
I'm trying to develop REST API with CloudRun and Firestore, and I need to firestore emulator. So I was trying to use firebase-tools. But It occurs error like below.

// This is firebase-debug.log

u [FetchError]: request to http://localhost:4400/emulators failed, reason: connect ECONNREFUSED ::1:4400
    at ClientRequest.<anonymous> (/Users/thikashi/.cache/firebase/emulators/ui-v1.7.0/server.bundle.js:326:16909)
    at ClientRequest.emit (node:events:513:28)
    at Socket.socketErrorListener (node:_http_client:481:9)
    at Socket.emit (node:events:513:28)
    at emitErrorNT (node:internal/streams/destroy:151:8)
    at emitErrorCloseNT (node:internal/streams/destroy:116:3)
    at process.processTicksAndRejections (node:internal/process/task_queues:82:21) {
  type: 'system',
  errno: 'ECONNREFUSED',
  code: 'ECONNREFUSED'
}

// This is console

Emulator UI has exited upon receiving signal: SIGINT

In my case, I was using node.js ver 18, and I have changed to ver.16. It works well!!

The problems took 3 hours... ... OMG.

How to reload express.js server with esbuild

TK — Fri, 15 Jul 2022 02:08:48 +0000

Hello!!
I'm trying to develop web server made of express.js. And I want to use esbuild as bundler, but esbuild don't have feature to realod server. So I tried to add the feature.

Finally, I used nodemon. Like below.

{
    "watch": [
        "src"
    ],
    "ignore": [
        "dist",
        "node_modules"
    ],
    "ext": "ts,mjs,js,json,graphql",
    "exec": "yarn build && yarn start",
    "legacyWatch": true
}

But it isn't best way to reload because that code regenerate all code... ... If you have another solution, I want to know that!!

What is unsubscribe in Sveletekit?

TK — Wed, 13 Jul 2022 05:48:49 +0000

When I tried to create persited store in SvelteKit, I had to understand unscribe function like below.

<script>
    import { onDestroy } from 'svelte'
    import { writable } from 'svelte/store';

    const count = writable(0, () => {
        console.log('Start subscribing')
                // Below function is called when execute unsubscribe function.
        return () => console.log('Stop subscribing');
    })

    const increment = () => count.update(value => {
        return value + 1
    })

    const unsubscribe = count.subscribe(value => {
        console.log(value)
    })

        onDestroy(unsubscribe)
</script>

<button on:click={increment}>
    Increment
</button>
<button on:click={unsubscribe}>
    Stop subscribe
</button>

What is unsubscribe function?

If we use subscribe, we should stop the subscribing. Because when component is died, we cannot stop it and use lots of memory. So we should call unsubscribe function with onDestory function. But it is too trouble to develop... ... so we can use $ prefix as instead.