• Зачем нужен третий параметр array для обратной функции в forEach, map, filter...?

    Aetae
    @Aetae Куратор тега JavaScript
    Тлен
    Чтоб можно было использовать функции из других модулей\библиотек, у которых нет доступа к текущему массиву напрямую из области видимости.

    Для чего может понадобится весь массив? Да для много чего. Например классический(но не оптимальный) фильтр уникальных значений:
    const uniq = (value, index, array) => !array.includes(value, index + 1);
    
    [1, 2, 2, 3, 3, 3].filter(uniq) // [1, 2, 3]
    Ответ написан
    Комментировать
  • Как в JSDoc описать тип через результат вызова функции?

    Aetae
    @Aetae Куратор тега JavaScript
    Тлен
    Зависит от того, что вам нужно: "шашечки или ехать".

    Коли первое - то тут уж надо глубоко изучать документацию по jsdoc, без гарантированного результата. Ради (почти) никому не нужных извращений я не возьмусь. :)

    Коли второе - IDE сейчас кушают любой typescript в jsdoc, потому просто смело пихаете:
    /** @type {Array<ReturnType<typeof createElement>>} */
    и оно заработает. Но никаких долговременных гарантий.
    Ответ написан
    1 комментарий
  • Как исправить ошибку eslint на события мыши?

    Aetae
    @Aetae Куратор тега JavaScript
    Тлен
    Чтобы исправить эту и многие иные ошибки надо включить мозг. Прям остановиться, нажать кнопку power on, и таки прочитать: кто тебе пишет, что тебе пишет, почему он тебе такое пишет.

    Итак:
    Кто тебе пишет? Пишет тебе набор правил vuejs-accessibility(vuejs-доступность по нашему). Этот набор правил сам по себе появиться не мог, он ставится дополнительным плагином. Если ты не знаешь откуда он у тебя взялся и тебе плевать на всяких инвалидов - можешь смело удалить этот плагин из eslint и забыть.

    Что тебе пишет? Коли по-басурмански ты не разумеешь, то тебе поможет гугл-транслейт:
    1. @mouseout или @mouseleave должны сопровождаться @focusout или @blur для доступности.
    2. @mouseover, @mouseenter или @hover должны сопровождаться @focusin или @focus для доступности.

    Почему он тебе такое пишет? Вот тут запускай свой мозг на все 146% и начинай по-нстоящему думать. Почему же совместно с @mouseenter нам может понадобится @focusin, если нам это советует правило по доступности? Думай, думай...
    Может быть для того, чтобы человек без возможности оперировать мышью смог таки с помощью клавиатуры вызвать связанные события, мм? И небольшое дублирование кода, которое поможет таким людям, совсем не страшно.

    P.S. Пока не выключен мозг - подумай ещё:
    1. К каким последствиям приведёт бездумное (лишь-бы-eslint-заткнулся) добавление одновременно @focus и @focusin?
    2. Не будет ли конфликтов внутри функций в случае получения элементом фокуса таки мышкой?
    ...
    Ответ написан
    Комментировать
  • Как решить проблему с сохранением выбранного языка при смене языка на мобильных устройствах?

    Aetae
    @Aetae Куратор тега JavaScript
    Тлен
    Вопрос в том что ты там закрываешь и открывешь, что у тебя в {{Route('ChangeLanguage', N)}}?
    Если там что-то вида /en и /tr то у тебя будет открываться собственно та версия, которая сохранена в закладках\истории, а не так которая была выбрана.

    Почему? Потому что твой код не предусматривает автоматическую смену адреса при загрузке, только при выборе.
    Если ты ожидал, что
    selectLang.selectedIndex = localStorage.getItem(storageKey);
    вызовет change автоматически - это не так, программная смена не вызывает событий.

    Теперь о самом коде:
    1. Нахрена там fetch? Ты зачем-то грузишь страницу в воздух, после чего переключаешь на неё.
    2. Весь код в принципе хрень. Перенаправление на нужный язык должно происходить на сервере. Если нужен выбор на клиенте с запоминанием - используй куки и читай эти куки на сервере.
    Ответ написан
    6 комментариев
  • Как убрать окошко, которое появляется на мобильном устройстве при долгом касании на ссылку?

    Aetae
    @Aetae Куратор тега JavaScript
    Тлен
    Да вроде работает:
    В каком именно браузере проблема?
    Ответ написан
    Комментировать
  • Почему не применяются стили?

    Aetae
    @Aetae Куратор тега Vue.js
    Тлен
    Если исправить все "технические" ошибки, которых у тебя тонна - то в самом коде Vue всё в порядке и переключение работает. :)

    Ошибки из-за которых оно вообще не должно собираться, а должно всю консоль исписать:
    1. Лишний закрывающий </div> в <template>.
    2. v-on: mouseover="out" должно быть слитно v-on:mouseover="out".
    3. Экспортируемый объект у тебя закрывается после data, methоds висят в воздухе.
    4. Не <styles>, а <style> причём судя по вложенности не просто <style>, который ожидает обычный css, а <style lang="scss">.

    Потенциальные ошибки:
    1. Отсутствие методов out и select.
    2. Отсутствие у <a> href="#" или, лучше, v-on:click.prevent из-за чего клик по ссылке открывает новую вкладку. А ещё лучше - не использовать <a> не для сссылок.
    3. Скорее всего ты хочешь, чтобы в случае если one - стока, то назначался класс из этой строки, а не класс .one, в таком случае выглядеть это должно так: v-bind:class="[one, { stels: stels }]" или, хуже, v-bind:class="{ [one]: one, stels: stels }".

    В целом: мужик, используй IDE, она тебе всё это заранее подчеркнёт; например VSCode абсолютно бесплатна.
    Ответ написан
    Комментировать
  • Полезный твик для Windows?

    Aetae
    @Aetae
    Тлен
    Если ты пишешь код, то как советуют выше - настрой(изучи) IDE. Современные IDE умеют всё, что ты можешь только себе вообразить(и ещё больше чего не можешь).

    Если ты хочешь уметь это делать в браузере для каких-нить форумов - установи расширение для пользовательских скриптов (например tampermonkey) и напиши себе простенький код на js(или найди готовый).

    Если ты хочешь уметь это делать прям универсально в рамках всей винды - тоже есть вариант: установить autohotkey и написать ещё более простой скрипт.
    Ответ написан
    Комментировать
  • Как вставлять текст со специальными символами?

    Aetae
    @Aetae
    Тлен
    dangerouslySetInnerHTML
    Как следует из названия - стоит дважды подумать, прежде чем использовать в продуктивном коде.
    Ответ написан
    Комментировать
  • Как решить проблему с кодировкой при чтении Excel файла?

    Aetae
    @Aetae Куратор тега JavaScript
    Тлен
    Измени:
    const htmlStr = xlsx.write(wb, { type: "binary"
    на:
    const htmlStr = xlsx.write(wb, { type: "string"

    "binary" - это спецформат т.н. "бинарная стока", она подходит для записи в файл напрямую побайтово, но не подходит для отображения на экране.
    Ответ написан
    Комментировать
  • Как исправить ошибку "Property *** does not exists on type ''IntrinsicAttributes" в React+TypeScript?

    Aetae
    @Aetae Куратор тега JavaScript
    Тлен
    Тебе английским по белому написано: "Property todos does not exists", что тут непонятно?

    Твой компонент TodoList не ожидает пропа todos.
    Ответ написан
    Комментировать
  • Как лучше сделать авторизацию в NUXT?

    Aetae
    @Aetae Куратор тега JavaScript
    Тлен
    Про "очень просто" ты меня сейчас сильно насмешил. Тот же OAuth - это просто адище под капотом. Но даже в basic auth есть куча мелочей на которых можно запороться.
    В общем использовать само собой следует либу, сам ты гарантировано словишь тонну багов и дыр в безопасности, только выбирать более-менее приличную(на глазок - больше 1000 Weekly Downloads на npmjs.com и от не вызывающего подозрений автора).

    Со стороны nuxt очевидно лучше всего подойдёт https://auth.nuxtjs.org/ , со стороны laravel - хз, гугли реализацию одного из вариантов поддерживаемых auth.nuxtjs.

    Ну и прекратят поддержку либы скорее всего задолго после того как ты прекратишь поддержку и обновление разрабатываемого приложения.:)
    Ответ написан
    Комментировать
  • Для чего добавляется окончание View в название компонента?

    Aetae
    @Aetae Куратор тега Vue.js
    Тлен
    В vue не должно быть "одноименных" компонентов, чтоб случайно не перекрыть какой-нить новый html6 тег, вот и придумывают всякое:)

    В данном конкретном случае постфикс View добавлен к тем компонентам, которые являются "шаблонами" страниц верхнего уровня в системе маршрутов роутера.
    Т.е. они, скорее всего, существуют в единственном экземпляре, а не являются множественно используемым компонентом, и всякая динамика уже происходит на уровень ниже.

    Это не является какой-то утверждённой системой, например во многих случаях используется система: Layout - для подобных шаблонов, Page - для конкретных вложенных страниц.

    В целом vue ничего в этом плане не оговаривает, потому каждый делает как ему приятнее или как оговаривает конкретный фреймворк.
    Ответ написан
    2 комментария
  • Как решить ошибку TS в атрибуте name для input type = radio?

    Aetae
    @Aetae Куратор тега TypeScript
    Тлен
    Ну name ждёт стрингу и не ждёт намбер, что тут непонятного?)
    "Правильно" - сделать как-то так :name="`${modelValue}`", но я бы попатчил типы инпута ибо он сам себе всё прекрасно преобразует.
    Ответ написан
    Комментировать
  • Правильное описание типов для колонок таблицы (Typescript)?

    Aetae
    @Aetae Куратор тега TypeScript
    Тлен
    Чтоюы union объектов работал - у него должно быть поле-дискриминатор(поле которое есть в каждом объекте и отличает его от другого), допустим type:
    type BaseColumn = { label: string; props: string }
    
    type Column = { type: 'text' } & BaseColumn
    
    type LinkColumn = { type: 'link'; path: string } & BaseColumn
    
    type TableColumn = Column | LinkColumn


    keyof для юниона объектов показывает только те поля, которые есть в каждом из них. Это логично, т.к. к типу TableColumn ты не можешь обратиться по полую .link предварительно не сузив тип. union - строгий.
    Ответ написан
    Комментировать
  • Почему не работает локальная библеотека на сборке Vite?

    Aetae
    @Aetae Куратор тега TypeScript
    Тлен
    declare module "custom-editor"
    import Editor from 'custom-editor-lib/dist/index'

    Не замечаешь разницы?
    Ответ написан
    Комментировать
  • Как сделать на vueJs 3 похожий эффект как jQuery slideToggle?

    Aetae
    @Aetae Куратор тега Vue.js
    Тлен
    На чистом vue 3 это делается как-то так:


    Мб тут можно как-то добавить tailwind, тут уж сам смотри.
    Ответ написан
    3 комментария
  • Как передать данные из сервера axios на express?

    Aetae
    @Aetae
    Тлен
    Тебе надо:
    0. Перестать заниматься техношаманизмом, у тебя плохо получается.
    1. Почитать статью для начинающих про то как работает протокол HTTP, какие там бывают запросы и т.д.
    2. Почитать документацию по библиотеке axios: как отравлять разные запросы.
    3. Почитать документацию по библиотеке express: как ожидать запросы, как получать данные.
    4. Почитать как делать авторизацию, потому что ты явно хочешь что-то крайне опасное на коленке сделать.
    *. Почитать как использовать в разработке devserver proxy, чтобы не возиться с cors.

    решение именно заданного вопроса, которое тебе всё равно не надолго поможет при текущем уровне знаний
    app.post('/tutorials', (req,res,next) => {
        // test1 = req.body; // глобальные серверные переменные тоже использовать точно не надо
        console.log(req.body);
    })
    
    axios.post('http://localhost:5000/tutorials', this.data.login)



    P.S. Vue тут не при чём.
    Ответ написан
    8 комментариев
  • Как типизировать router.push(pathname)?

    Aetae
    @Aetae Куратор тега TypeScript
    Тлен
    Проверил чистую установку next 13.4.12 - такой проблемы нет.

    Где-то говняет типы роутера. Возможно у тебя отдельно в package.json подключена устаревшая в версия роутера - тогда удали её.
    Иначе тыкни Ctrl+Click на .push и тебе откроет файл с декларацией, если она не\не только в next/dist/shared/lib/app-router-context.d.ts - разбирайся откуда взялась левая.
    Ответ написан
    Комментировать
  • Как правильно разрушить и инициализировать Swiper?

    Aetae
    @Aetae Куратор тега Vue.js
    Тлен
    Как и с любым иным компонентом vue - не через залезание руками в api\dom.
    Просто делаете v-if="showSwiper" и переключаете, соответственно, this.showSwiper. Если v-if="false" компонент будет разрушен и всё.

    // Нормальные компоненты производят всю необходимую очистку внутри себя сами по автоматическому хуку destroy, и вам не надо не о чём заботиться. Иногда конечно встречается кривое г-но с текущей памятью, но в таких случях проще самому написать компонент с нуля.

    P,S. Никогда не используйте в одном компоненте одновременно setup и methods, вообще никогда. Либо одно либо другое. Это разная парадигма.
    Ответ написан
    5 комментариев
  • Встроить созданный на Vue.js видео плеер в wordpress, есть ли смысл и как это сделать?

    Aetae
    @Aetae Куратор тега Vue.js
    Тлен
    Vue прекрасно поддерживает встройку куда угодно, просто подключаете на странице в script umd версию и тупо делаете mount в нужный dom-элеемент. Никакие фреймы не нужны. Только стили саого компонента огородите от перемешивания с местом встраивания, например с помощью БЭМ и\или префиксов.

    А ещё лучше - сделать из vue-компонента - web-component, если ориентация идёт на современные бразуеры. Тогда стили вообще будут инкапсулированы, а управление можно вынести в обычные html-аттрибуты.
    Ответ написан
    Комментировать