DEV Community: Alexander Kim

Set up command line launcher in WebStorm 2024.2+

Alexander Kim — Sun, 18 Aug 2024 10:08:29 +0000

If you're using WebStorm 2024.2+ without JetBrains Toolbox, it won't install command-line launcher automatically.
Though, there's a menu "Tools > Create Command-line Launcher" that won't do anything useful, except showing you a link on how to do that,
but it's bugged for now.

MacOS setup

Create a file under the following location: "/usr/local/bin/webstorm"
chmod +x /usr/local/bin/webstorm
File contents:

#!/bin/sh

open -na "WebStorm.app" --args "$@" > /dev/null 2>&1 &

This would allow you to open any project in command-line, and type webstorm ., to open WebStorm in a current directory, without any errors.

Using Nuxt 3 server routes for telegram bot api

Alexander Kim — Sun, 21 Jul 2024 06:55:17 +0000

In this short article, we're going to use telegram setWebhook, instead of getUpdates polling mechanism. I omit the steps where you have to set up a new bot in telegram UI, using BotFather

Nuxt 3 setup

Create telegram-webhook.post.ts in "server/api" directory with the following contents:

import TelegramBot from 'node-telegram-bot-api'

export default defineEventHandler(async event => {
  const config = useRuntimeConfig()
  const token = config.telegramBotToken

  // Create a new TelegramBot instance (without polling)
  const bot = new TelegramBot(token)

  // Read the incoming request body
  const body = await readBody(event)

  // Extract the message
  const { message } = body

  if (message) {
    const chatId = message.chat.id
    const text = message.text

    // Respond to the received message
    if (text) {
      await bot.sendMessage(chatId, `Ты сказал: ${text}`)
    }

    // Handle /start command
    if (text && text.startsWith('/start')) {
      await bot.sendMessage(
        chatId,
        'Hi, i am bot, how can i help you?',
      )
    }
  }

  return { status: 'ok', message }
})

don't forget to add "node-telegram-bot-api" npm package. The we start Nuxt3 instance. Now we need to set up a webhook.

We have to call:
curl https://api.telegram.org/bot<telegram_bot_token>/setWebhook?url=https://<your-domain.com>/api/telegram-webhook
this command will set up our POST API endpoint as webhook for telegram. Official documentation on hooks

If you're done everything corretly, then whenever you type a message to your bot, you'll get a response.

Setup path aliases w/ React + Vite + TS

Alexander Kim — Sat, 30 Apr 2022 06:19:50 +0000

Out of the box vite doesn't provide "@" path alias to src, so we have to manually setup it. I suppose you're using Vite preset for react-ts.

Steps to setup this:

Step 1

vite.config.ts:

// also don't forget to `npm i -D @types/node`, so __dirname won't complain
import * as path from 'path'

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: [{ find: '@', replacement: path.resolve(__dirname, 'src') }],
  },
})

This would tell Vite about the alias.

Step 2

We're adding "@" alias for src directory (ts needs this).

tsconfig.json:

{
  "compilerOptions": {
    // ...rest of the template
    "types": ["node"],
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

Usage

import Comp from '@/components/Comp'

Fixing - Cannot find name '__dirname'.ts(2304)

Alexander Kim — Sat, 30 Apr 2022 04:04:59 +0000

It happens when we try to use __dirname in a TS file.

Steps to fix this:

Installing node types: npm i -D @types/node

Applying types in to tsconfig.json:

"compilerOptions": {
  "types": ["node"],
},

Then using it:

import * as path from 'path'

console.log(__dirname)

Path aliases in Nextjs

Alexander Kim — Sat, 18 Dec 2021 05:31:45 +0000

Tired of writing such imports?

import test from '../../../components/Test.tsx';

If you're using a typescript, you can create a path alias instead:

{
  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
      "@/*": ["./*"] 
    }
  }
}

Then you can import more conveniently:

import test from '@/components/Test.tsx';

Don't forget to restart your running task to affect changes.

Using axios globally in a Vue 3 with provide/inject (composition API)

Alexander Kim — Fri, 03 Dec 2021 03:58:56 +0000

In a Vue 2 we had to use Vue.prototype in order to add global properties to a Vue instance. But in a Vue 3 we got "Composition API".

So, using a composition api, recommended way to add global properties, is by using provide/inject. Because config.globalProperties considered as an escape hatch

Let's get started.

1. Create a file called http.ts (you can name it as you wish):

import axios, { AxiosInstance } from 'axios'

const apiClient: AxiosInstance = axios.create({
  baseURL: 'https://api.openbrewerydb.org',
  headers: {
    'Content-type': 'application/json',
  },
})

export default apiClient

It's our global Axios instance with the options.

2. Create a file symbols.ts

import { InjectionKey } from 'vue'
import { AxiosInstance } from 'axios'

export const AxiosKey: InjectionKey<AxiosInstance> = Symbol('http')

This is required to type our Provide/Inject.

3. Go to main.ts

// libs
import http from '@/http'
import { AxiosKey } from '@/symbols'

const app = createApp(App)

app.provide(AxiosKey, http)

We're providing our Axios instance globally here, using InjectionKey - AxiosKey, so it's typed now. Otherwise you would have to provide types every time you use inject()

4. Create a function to deal with undefined values, when you use `inject()`:

import { inject, InjectionKey } from 'vue'

export function injectStrict<T>(key: InjectionKey<T>, fallback?: T) {
  const resolved = inject(key, fallback)
  if (!resolved) {
    throw new Error(`Could not resolve ${key.description}`)
  }
  return resolved
}

It was found in this useful blog post

5. Using our global axios instance inside a component:

<script setup lang="ts">
import { ref, onMounted } from 'vue'

// typing inject
import { injectStrict } from '@/utils/injectTyped'
import { AxiosKey } from '@/symbols'

interface Breweries {
  id: string
  name: string
}

const http = injectStrict(AxiosKey) // it's typed now
const breweries = ref<Breweries[]>([])

onMounted(async () => {
  const resp = await http.get<Breweries[]>('/breweries')
  breweries.value = resp.data
})
</script>

React and Vue development speed discussion

Alexander Kim — Sat, 04 Apr 2020 07:09:33 +0000

Is there any dev's that extensively used React and Vue? What do you like more about React/Vue?

I find myself returning to React all the time from Vue, because i don't like Vue abstractions over JS, also TS support in Vue is not superior, React is better there.

But, i have a concern about time-to-market speeds with React, it usually takes, like 30% more time for me to finish an app, than using Vue.

Dealing with infinite loops in useEffect hook

Alexander Kim — Mon, 24 Feb 2020 19:33:40 +0000

When i switched to hooks from class styled components, i considered useEffect() hook with empty dependencies array as componentDidMount(), what stopped me from using it this way - eslint error react-hooks/exhaustive-deps, so i've started to dig deeper on how to do it the right way.

Let's look at this common example, where we are fetching some data from an API using our custom hook:

const useFetch = <R, B>(
  url: string,
  method: Methods,
  body: B | undefined = undefined,
  headers: { [key: string]: string } = {}
) => {
  const [response, setResponse] = useState<R | null>(null);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    (async () => {
      dispatch(onRequest(true));
      try {
        if (user.jwt) {
          headers['Authorization'] = `Bearer ${user.jwt}`;
        }
        const result = await api<R, B>(url, method, body, headers);
        setResponse(result as R);
      } catch (error) {
        setError(error);
        dispatch(onFailure(false, error));
      } finally {
        dispatch(onFinish(false));
      }
    })();
  }, []);
};

This looks and works as expected, when your component mounts, data would be fetched once, but eslint would start warn you:

"ESLint: React Hook useEffect has missing dependencies: 'body', 'dispatch', 'headers', 'method', 'url', and 'user.jwt'. Either include them or remove the dependency array.(react-hooks/exhaustive-deps)"

If we add all of these noted above dependencies, then we would get an infinite loop, because of the headers param is equal to {}.
In JavaScript {} === {} is always false, so we would get stuck in a loop.

Solution to this problem, is to use useRef() hook:

const { current: hdrs } = useRef(headers);

Then we just have to rename headers param references to hdrs (we just destructured current from useRef for convenience, otherwise we would have to use it as variableName.current). And add all of useEffect() dependencies in to array:

[body, hdrs, dispatch, method, url, user.jwt]

Now, every time our component is mounted, it fires useEffect, but we won't get stuck in a nasty loop, because all of its dependencies remain unchanged.

I previously used useMemo() to save a reference to a value, but there's a useRef() for such purposes. A good article that pointed me in a right direction

My Fetch Wrapper with async/await and TypeScript

Alexander Kim — Thu, 13 Feb 2020 05:55:02 +0000

Posting my wrapper for a native fetch() API:

const API_URL: string = process.env.YOUR_ENV_NAME || 'https://example.com';

export default async <T, B>(
  url: string,
  method = 'get',
  body: B | undefined = undefined,
  headers = {}
): Promise<T | { error: string }> => {
  const controller = new AbortController();
  try {
    const res = await fetch(`${API_URL}${url}`, {
      method: method.toUpperCase(),
      signal: controller.signal,
      body: typeof body === 'object' ? JSON.stringify(body) : undefined,
      mode: 'cors',
      headers: {
        'Content-type': 'application/json',
        ...headers
      }
    });
    if (!res.ok) {
      const error = await res.json();
      return { error: error.code };
    }
    return await res.json();
  } catch (err) {
    return { error: err };
  } finally {
    controller.abort();
  }
};

And we can use it this way:

const result = await api<IResponse, IBody>('url', 'post', { name: 'asd' });
if (result.error) {
  // handle error;
} else {
  // handle successful response
}

We can type our response as 1st type argument, and body as 2nd.

I wrote it to use in my React app. Improvements of this code snippet are welcome!