Я Максим мне 14 лет. Я начинающий Python разработчик.



// two years later


Я Максим мне 16 лет. Я учу (и выучу) js.



// one years later again


Я Максим мне 17 лет. Я пишу на ванильном JS. React, Redux Toolkit, Tailwind. Немного понимаю, и использую NodeJS, Express. Увлекло создание full-stack сайтов. Вот так вот.
Контакты
Местоположение
Украина, Одесская обл., Одесса

Наибольший вклад в теги

Все теги (17)

Лучшие ответы пользователя

Все ответы (14)
  • Как сделать аутентификацию на сайте через телеграм?

    CoDeR2006
    @CoDeR2006 Автор вопроса
    TypeScript
    И так, для меня в будущем, и для тех кто это нагуглил:

    Дело в том что без виджета на начало 2024 сделать авторизацию практический не возможно, вот реально правильное решение если у вас похожий стэк, и вы планируете делегировать саму регистрацию на сервер, а не делать все через front.

    Интегрируем виджет в приложение react + ts:
    (это если вам надо что бы был не редирект, а вызов функции со стороны telegram)
    import { useEffect } from 'react'
    import { ITelegramUser } from '../../../../types/telegram/api-telegram-user.ts'
    
    declare global {
      interface Window {
        onTelegramAuth: (user: ITelegramUser) => void
      }
    }
    
    export const ButtonTelegramAuth = () => {
      useEffect(() => {
        const button = document.createElement('script')
        button.async = true
        button.src = 'https://telegram.org/js/telegram-widget.js?22'
        button.setAttribute('data-telegram-login', 'name_bot')
        button.setAttribute('data-size', 'large')
        button.setAttribute('data-radius', '20')
        button.setAttribute('data-onauth', 'onTelegramAuth')
    
        document.body.appendChild(button)
    
        window.onTelegramAuth = function (user) {
          alert(
            'Logged in as ' +
              user.first_name +
              ' ' +
              user.last_name +
              ' (' +
              user.id +
              (user.username ? ', @' + user.username : '') +
              ')'
          )
        }
    
        return () => {
          document.body.removeChild(button)
        }
      }, [])
    
      return <div id="telegram-widget-container"></div>
    }


    если нужен все таки редирект мы добавляем такое поле:
    script.setAttribute('data-auth-url', 'https://site.pw');

    и удаляем это:
    button.setAttribute('data-onauth', 'onTelegramAuth')
    
    declare global {
      interface Window {
        onTelegramAuth: (user: ITelegramUser) => void
      }
    }
    
     window.onTelegramAuth = function (user) {
          alert(
            'Logged in as ' +
              user.first_name +
              ' ' +
              user.last_name +
              ' (' +
              user.id +
              (user.username ? ', @' + user.username : '') +
              ')'
          )
        }


    И так объясняю в чем задумка:
    В ваше приложение react интегрируется все тот же виджет, но правильным образом. После нажатия на виджет происходит авторизация пользователя (он вводит свои данные / просто нажимает войти). Потом телеграм передает все его данные вам (в функцию - №1 способ / по get параметрам в url). Если вы делегируете
    регистрацию на сервер (а так правильно) то выбираете 2 способ. Сервер получает данные валидирует их и заносит в БД, затем делает редирект вашего пользователя к вам обратно на front, и заносит token (или что там еще не разобрался) в HttpOnly Ckookie. Ну а далее в моем случае Guard будет проверять есть этот token или нет, годен он или нет.

    Передаю привет Максиму в будущем. Как дела Макс ?
    Ответ написан
    Комментировать
  • Как сверстать блоки которые визуально находятся на разных уровнях?

    CoDeR2006
    @CoDeR2006
    TypeScript
    Привет, скорее всего ты рановато полез в Tailwind раз не понимаешь как такие штуки делаются.
    Это обычная grid сетка, у которой например рядов 5 рядов, и 2 столбика.

    Ты должен сделать примерно так:
    <div className='grid grid-col-[1fr_1fr] grid-row-[repeat(5,_1fr)]'>
       <div className='row-start-2 row-end-4'> </div>
      // и таким образом двигать нужные тебе блоки, если что ссылка на доку ниже
    <div/>


    documentation - https://tailwindcss.com/docs/grid-row
    Ответ написан
    2 комментария
  • WebStorm как убрать подсветку вложенности?

    CoDeR2006
    @CoDeR2006 Автор вопроса
    TypeScript
    Settings | Editor | General | Appearance | Enable HTML tag tree highlighting

    спасибо Araya, подсказали как гуглить
    Ответ написан
    Комментировать
  • Почему именно так рассчитывается в данном случае ширина элемента?

    CoDeR2006
    @CoDeR2006
    TypeScript
    Я посмотрел твой код, прикол в том что родительский элемент у тебя flex по этому это не так работает как ты думал, а именно - text питается занять всю ширину. У тебя несколько выходов:
    1. Задавать ширину картинке не как width а как min-width.
    2. Задать элементу text flex 1.

    Ну конечно все зависит от того эффекта который ты хочешь получить. Но решение твой проблемы я написал.
    Ответ написан
    2 комментария

Лучшие вопросы пользователя

Все вопросы (33)