• Как сделать аутентификацию на сайте через телеграм?

    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 или нет, годен он или нет.

    Передаю привет Максиму в будущем. Как дела Макс ?
    Ответ написан
    Комментировать
  • Как настроить VS code для удобной навигации по вкладкам. По умолчанию они скрыт если не влазят на экран?

    yarkov
    @yarkov
    Помог ответ? Отметь решением.
    В настройках галочку поставь на параметр Wrap tabs
    https://youtu.be/aAEndEILXvY
    Ответ написан
    Комментировать
  • 6/2(1+2) =? (простой вопрос по школьной программе)

    BronislavRA
    @BronislavRA
    Для однозначного ответа нужно задекларировать, что означает символ / .
    Если это символ дроби, то результат будет 1. 62b66b36da874775016879.png
    Если это арифметический символ деления, то результат 9. 62b657020334a557530408.png

    Но вариант где / - это дробь, конечно же абсурден. Никто так не записывает, разве что на бытовом уровне для представления дробных чисел 1/2 вместо 0,5. Никто так не делает, так как это актуально только на ПК использовать что-то вместо горизонтальной черты, но вся соль в том, что на ПК символ / означает деление. Кроме того на практике не возможно записать целую часть дроби по человечески при использовании / в качестве обозначения дроби вместо горизонтальной черты, нам бы пришлось "упрощать" 8/3 = (2*3+2)/3 вместо 62b67a3e2e343777927377.png

    Всем кто утверждает, что при раскрытии скобок мы умножать обязаны - да обязаны, только в порядке выполнения арифметических операций, а значит мы сперва должны поделить 6 на 2 либо умножать это в дробном выражении, приведя (1+2) в дробь.

    К слову всё это дело с алгеброй вообще никак не связано, так как в данном арифметическом выражении отсутствуют буквенные переменные. Но допустим, приоритет арифметических операций меняется магическим образом как только мы заменим 2 на A, то по представленной в одном из комментариев алгебраической "логике" "приоритета умножения над делением" в результате весь ход арифметических вычислений перевернется с ног на голову и у нас равенство просто не сойдется с исходными данными. Алгебра не может противоречить арифметике и принципам работы с дробями, так как это ее основа.
    Ответ написан
    Комментировать
  • Почему VSCode пишет: ожидалось "}",хотя всё расставлено?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    точку-с-запятой убрать?

    - };
    + }
    Ответ написан
    Комментировать
  • Как правильно прописать font-display?

    @skeevy
    Frontend WebDev
    1. PageSpeed - не серебряная пуля. Это, в первую очередь, синтетика.
    2. В отладчике включите троттлинг и смотрите, как ведут себя шрифты, если у вас нет текста - font-display попросту не работает
    3. Убедитесь, что у вас сброшен кеш (как серверный, так и локальный) прежде чем тестировать
    4. Вам не нужно использовать PageSpeed, у вас в Хроме уже есть LightHouse, к которому PageSpeed обращается. Так сказать, внешняя реализация того, что встроено уже в хром (не к вашему локальному, если что)
    5. Возможно, у Вас недостаточно запасных шрифтов для отработки свапа. У вас идет обращение к локальным шрифтам, которых модет не быть. Я бы свапал на Roboto/Arial/serif/sans-serif.
    6. Убедитесь, что у вас правильно написан фоллбек в src, включая отсылку на локальные шрифты
    Ответ написан
    Комментировать
  • Как вернуть старую плавную прокрутку в новом Firefox Nigtly/Developer?

    @DaniilSM Автор вопроса
    Покопался в скрытых параметрах и нашел. Нужно изменить этот параметр "general.smoothScroll.mouseWheel.migrationPercent" в "about:config" со 100 на 0.
    Ответ написан
    Комментировать
  • Как сделать такой элемент в верстке?

    @anton99zel
    29а класс средней школы №7
    border:20px solid grey;
    ))
    Ответ написан
    Комментировать
  • Как вывести куб введённого числа?

    dimovich85
    @dimovich85 Куратор тега JavaScript
    https://u-academy.net/
    Получить инпуты и кнопки - document.querySelector
    Обработать события - elem.addEventListener
    События на инпутах в данном случае - change, будет кстати.
    Событие на кнопке - click
    Получить данные из инпута - elem.value
    Записать значение - elem.value = value
    UPD: куб числа рассчитывается как a * a * a, ну или a**3
    Ответ написан
    Комментировать
  • Как убрать дату из спинета в description wordpress?

    init0
    @init0
    Старый моряк
    У меня premium версия, но думаю эта опция есть и в бесплатной: SEO > Отображение в поисковой выдаче > вкладка Типы содержимого > Товары - выключить опцию Date in Google Preview
    Ответ написан
    Комментировать
  • Как вывести кастомные поля ACF, заданные для атрибута на странице товара (woocomerce)?

    pasha_zigzag
    @pasha_zigzag
    Джун Джуновский
    В цикле.
    $term = $product->get_attribute( 'pa_brand' );
    $term = get_term_by('slug', $term, 'pa_brand');
    the_field('url', 'pa_brand_'.$term->term_id);
    Ответ написан
    Комментировать
  • Как ускорить скорость загрузки сайта, метрика и движовосайт тянут вниз?

    HeadOnFire
    @HeadOnFire
    PHP, Laravel & WordPress Evangelist
    Отложить загрузку на 5 секунд - выход, но грубоватый (имхо конечно). Я делаю по-другому - оборачиваю код в скролл-ивент + задержка в 1 секунду. То есть, сайт загрузился быстро, и как только пользователь начал скроллить хоть чуть-чуть - секундный таймаут и загрузка дополнительных ресурсов. Гугл доволен, пользователи вообще не замечают задержки:

    var fired = false;
    
    window.addEventListener('scroll', () => {
        if (fired === false) {
            fired = true;
            
            setTimeout(() => {
                // Здесь все эти тормознутые трекеры, чаты и прочая ересь,
                // без которой жить не может отдел маркетинга, и которые
                // дико бесят разработчиков, когда тот же маркетинг приходит
                // с вопросом "почему сайт медленно грузится, нам гугл сказал"
            }, 1000)
        }
    });
    Ответ написан
    29 комментариев
  • Как снизить скорость автоформатирования в VS Code?

    mindyourlifeguide
    @mindyourlifeguide
    Снимите галочку
    KYnOacv.png
    Ответ написан
    Комментировать
  • Как VS code поменять цвет шрифта, мне не нужно менять всю тему, а только цвет переменных?

    В settings.json добавляем:
    "editor.semanticTokenColorCustomizations": {
        "enabled": false
    },
    "editor.tokenColorCustomizations": {
        "textMateRules": [
            {
                "name": "variable",
                "scope": ["variable.other.readwrite"],
                "settings": {
                    "foreground": "#cc12bc"
                }
            }
        ]
    }

    Нажмите Ctrl + Shift + P, чтобы открыть проводник команд. Введите Developer: Inspect Editor Tokens and Scopes, и вы увидите подсказку при клике на нужный атрибут.

    Также, для команды выше, можно назначить горячую клавишу (например F4), Меню → Файл → Настройки → Сочетания клавиш и в строке поиска вводим inspectTMScopes .......

    Или добавить фрагмент кода в файл C:\Users\имя_пользователя\AppData\Roaming\Code\User\keybindings.json

    {
        "key": "f4",
        "command": "editor.action.inspectTMScopes"
    }


    5ed09dceb308f792004261.gif
    Ответ написан
    Комментировать
  • Как соединить два плагина Wordpress?

    wppanda5
    @wppanda5 Куратор тега WordPress
    WordPress Mедведь
    Подскажите как решить эту проблему.


    1) Изучить php, разобраться как работает WP и WC, залезть в код вашей сборки и исправить все. потому как никто в здравом уме не будет повторять у себя вашу конфигурацию и искать в чем же причина.

    2) Сходить на фриланс и заплатить тому кто умеет
    Ответ написан
    Комментировать
  • Какой таймтрекер юзать для trello?

    MegaMufa
    @MegaMufa
    https://toggl.com/
    И расширение в браузере ставишь для него Toggl Button: Productivity & Time Tracker (в настройках надо будет дать доступ к сайту сайту трелло).

    Теперь в карточке появится кнопка для начала отсчета времени.

    Мне бесплатного тарифа хватате. Трекалка, отчеты. Я в конце месяца делаю отчет, экспортирую в пдф и начальнику отправляю. Удобно.

    Пользуюь уже больше 5 лет, всем доволен.
    Ответ написан
    Комментировать
  • Почему хром жрет время процессора?

    Jump
    @Jump
    Системный администратор со стажем.
    Почему хром жрет время процессора?
    Потому что может.
    Ответ написан
    Комментировать
  • Как найти не используемые css классы?

    OtshelnikFm
    @OtshelnikFm
    Обо мне расскажет yawncato.com
    Разбивай на компоненты код - и потом на сборку. Как весь мир фронтенд собирает

    В момент когда будешь спагетти css разбирать на секции - ты найдешь неиспользуемые стили.
    Но это в трио: css, html, js - только так найдешь по всем.

    Еще вариант - я вижу что css с душком (без префикса, без BEM и т.д.) - то провожу поиск этого имени по всему проекту. В коде, верстке в js - он найдет все вхождения. Если не найдет - смело удаляй. Но - при условии что ты знаешь как работает проект. А то наломаешь дров если там зависимость от чего-то с третьей стороны идёт.

    css не чистить надо. Его надо разбивать на модули - файлы. И тогда бардака не будет. И объединять все файлы тем же вебпаком
    Ответ написан
    3 комментария
  • Как отредактировать хлебные крошки в WooCommerce?

    wppanda5
    @wppanda5 Куратор тега WordPress
    WordPress Mедведь
    add_filter('gettext', 'wpp_change_product_label_translate');
    	add_filter('ngettext', 'wpp_change_product_label_translate');
    
    	function wpp_change_product_label_translate($translated) {
    		$translated = str_ireplace('Товары', 'Продукты', $translated);
    		$translated = str_ireplace('Товар', 'Продукт', $translated);
    		return $translated;
    	}
    Ответ написан
    2 комментария
  • Как увеличить количество вариаций woocommerce больше 30?

    vagono
    @vagono Автор вопроса
    Нашел решение.

    Добавляем в functions.php следующий код:

    function iconic_wc_ajax_variation_threshold( $qty, $product ) {
        return 50;
    }
    
    add_filter( 'woocommerce_ajax_variation_threshold', 'iconic_wc_ajax_variation_threshold', 10, 2 );


    Где return 50; нужное количество вариаций для динамического отображения
    Ответ написан
    Комментировать