Все сервисы Хабра

Сообщество IT-специалистов

Ответы на любые вопросы об IT

Профессиональное развитие в IT

Удаленная работа для IT-специалистов

Войти на сайт
  • Все вопросы
  • Все теги
  • Пользователи

Хабр Q&A — вопросы и ответы для IT-специалистов

Получайте ответы на вопросы по любой теме из области IT от специалистов в этой теме.

Узнать больше
другие проекты хабра
  • Хабр
  • Карьера
  • Фриланс
Задать вопрос
andrhohlov

Андрей Хохлов

  • 399
    вклад
  • 29
    вопросов
  • 384
    ответа
  • 52%
    решений
Комментарии
  • Информация
  • Ответы
  • Вопросы
  • Комментарии
  • Подписки
  • Нравится
  • Достижения
  • Ошибка при выполнении команды npm install на VPS. Как решить?

    andrhohlov
    Андрей Хохлов @andrhohlov
    Где вы ошибку то увидели?
    Написано 10 апр. 2022
  • Можно ли вызвать переполнение стэка без рекурсии?

    andrhohlov
    Андрей Хохлов @andrhohlov
    Рискну:

    function foo() { 
      bar();
    }
    
    function bar() { 
      foo();
    }
    
    foo();


    VM204:1 Uncaught RangeError: Maximum call stack size exceeded
        at bar (<anonymous>:1:18)
        at foo (<anonymous>:1:18)
        at bar (<anonymous>:1:18)
        at foo (<anonymous>:1:18)
        at bar (<anonymous>:1:18)
        at foo (<anonymous>:1:18)
        at bar (<anonymous>:1:18)
        at foo (<anonymous>:1:18)
        at bar (<anonymous>:1:18)
        at foo (<anonymous>:1:18)


    Рекурсия подразумевает, что функция вызывает саму себя. В моём примере ни одна из функций не является рекурсивной.
    Написано 11 февр. 2022
  • Как исправить ошибки при подключении vuelidate?

    andrhohlov
    Андрей Хохлов @andrhohlov
    akchl1, информация об уязвимостях никак не связана с тем что у вас есть какие-то ошибки с vuelidate

    https://docs.npmjs.com/auditing-package-dependenci...
    https://stackoverflow.com/questions/50243901/found...
    Написано более года назад
  • Как исправить ошибки при подключении vuelidate?

    andrhohlov
    Андрей Хохлов @andrhohlov
    на скриншоте нет ошибок
    Написано более года назад
  • Как использовать импортированную переменную в шаблоне?

    andrhohlov
    Андрей Хохлов @andrhohlov
    uRoot, можно. В целом можно любые выражения и вычисления использовать в шаблонах.

    Непосредственно в документации объясняется мотивация использования computed https://vuejs.org/v2/guide/computed.html - длинные/сложные выражения в шаблонах трудно читать и поддерживать. Плюс computed кешируются.

    Склеить 2 строки это конечно ;t не про сложные выражения, так что тут скорее про best practices принятые у нас.

    Кроме того, в вашем случае правильным решением


    ->

    Кроме того, на мой взгляд более правильным
    Написано более года назад
  • Почему gulp не обновляет все файлы html?

    andrhohlov
    Андрей Хохлов @andrhohlov
    Скиньте целиком gulpfile, пожалуйста
    Написано более года назад
  • Как отследить над каким элементом находиться пользователь?

    andrhohlov
    Андрей Хохлов @andrhohlov
    denis-chenykh, отложите изучение jQuery и Vue до того момента, как изучите JS и https://developer.mozilla.org/en-US/docs/Web/API/D...

    И вам станет сразу понять, как добавить обработчик события на элементе, какое именно событие нужно (mouseenter или mousemove в вашем случае). И затем уже можно будет приступать к документации к Vue где написано как правильно слушать события в нём https://v3.vuejs.org/guide/events.html
    Написано более года назад
  • Как я могу подключить шрифт HYWenHei в node js используя Canvas?

    andrhohlov
    Андрей Хохлов @andrhohlov
    Судя по всему, не только вы столкнулись с подобной проблемой. Причём последние ишью прям по вашему шрифту.

    https://github.com/Automattic/node-canvas/issues/1887
    https://github.com/Automattic/node-canvas/issues/1801
    https://github.com/Automattic/node-canvas/issues/1608
    https://github.com/Automattic/node-canvas/issues/868

    Попробуйте другой шрифт, чтобы убедеться что проблема именно с конкретным шрифтом.
    Попробуйте, может что-то из обсуждений поможет в вашем случае.
    Попробуйте в докере запустить. У меня есть сервис который использует кастомный шрифт в node-canvas, без проблем.
    Написано более года назад
  • Как использовать ES6 Proxy с TypeScript?

    andrhohlov
    Андрей Хохлов @andrhohlov Автор вопроса
    WbICHA, спасибо, работает. И с параметрами тоже

    https://www.typescriptlang.org/play?ssl=80&ssc=3&p...

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

    В нашем кейсе инстанс апи клиента добавляется в объект "контекст", который инжектится в компоненты (Vue), а так же передаётся в, например, функцию которая создаёт глобальное хранилище (чтобы быть доступным в его методах).

    Минимальный пример

    // types.ts
    
    export interface IAppContext {
      api: ApiType, // ???
    }
    
    // main.ts
    
    import { createApi } from './services/Api';
    import { IAppContext } from './types';
    import { createStore } from './store';
    
    const api = createApi(
      { url: '/' },
      {
        getData: { method: 'get', url: '/data' },
      },
    );
    
    const context : IAppContext = {
      api,
    };
    
    const store = createStore(context);
    
    // store.ts
    
    import { IAppContext } from './types';
    
    export function createStore(context: IAppContext)  {}



    Я понимаю, что сейчас у нас тип api - generic и объявить его в отдельном файлике становится невозможным.
    Можно пойти дальше и "задженерить" вообще всё...

    createStore<typeof context>(context);
    function createStore<T>(context: T)  {}


    Но я опасаюсь, не будет ли это потенциальным клубком проблем в будущем. А кроме того есть места, где это в принципе не ложится:

    import { InjectionKey } from 'vue';
    import { IAppContext } from './types';
    
    export const APP_CONTEXT_KEY: InjectionKey<IAppContext> = Symbol('context');


    Нашёл такой вариант:

    // types.ts
    
    import { Api } from './api';
    
    export interface IAppContext {
      api:  Api,
    }
    
    // api.ts
    
    import { createApi } from '@/services/Api';
    
    export const api = createApi(
      { url: process.env.VUE_APP_API_URL },
      {
        getTodo: { method: 'get', url: '/todos/{id}' },
      },
    );
    
    export type Api = typeof api;


    Но и тут компромис, мне не очень нравится отдельный файл в таком случае. Теоретически могла бы возникнуть потребность передавать что-то в функцию создающую api клиент в main.ts.

    Было бы интересно услышать ваше мнение (и мнение коллег которые заглянут в тред) относительно этой ситуации.
    Написано более года назад
  • Как интегрировать логику из react в vue?

    andrhohlov
    Андрей Хохлов @andrhohlov
    Ростислав, 612604465b712335379071.jpeg

    UPD: ещё до кучи к размышлению, но опять же это не про пару компонентов https://github.com/rajasegar/awesome-micro-frontends
    Написано более года назад
  • Проблема с реактивностью в Vue 3 при рендере элементов в computed?

    andrhohlov
    Андрей Хохлов @andrhohlov
    Comnox, у computed свойств не должно быть побочных эффектов - они не должны в ходе вычисления менять какие-либо другие свойства.
    Написано более года назад
  • Проблема с реактивностью в Vue 3 при рендере элементов в computed?

    andrhohlov
    Андрей Хохлов @andrhohlov
    Зачем же вы в computed такое делаете... В методы вынесите для начала.
    Написано более года назад
  • Как использовать библиотеку Lodash внутри шаблонов Pug-а?

    andrhohlov
    Андрей Хохлов @andrhohlov
    lorentso, отметьте решением ответ. Я сделал ровно то, что там написано.
    Написано более года назад
  • Как использовать библиотеку Lodash внутри шаблонов Pug-а?

    andrhohlov
    Андрей Хохлов @andrhohlov
    lorentso, всё работает:

    package.json

    {
      "name": "pug-lodash-test",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
      },
      "author": "",
      "license": "ISC",
      "devDependencies": {
        "gulp": "^4.0.2",
        "gulp-pug": "^5.0.0",
        "pug": "^3.0.2"
      },
      "dependencies": {
        "lodash": "^4.17.21"
      }
    }


    gulpfile.js

    const { src, dest } = require('gulp');
    const pug = require('gulp-pug');
    const _ = require('lodash');
    
    exports.views = () => {
      return src('./src/*.pug')
        .pipe(
          pug({
            data: {
              message: 'Hello, world!',
              _,
            },
          }),
        )
        .pipe(dest('./dist'));
    };


    src/index.pug

    h1
        =message
    h2
        =_.camelCase('Foo Bar')
    Написано более года назад
  • Как использовать библиотеку Lodash внутри шаблонов Pug-а?

    andrhohlov
    Андрей Хохлов @andrhohlov
    lorentso, скиньте архивом, так не понятно
    Написано более года назад
  • Как использовать библиотеку Lodash внутри шаблонов Pug-а?

    andrhohlov
    Андрей Хохлов @andrhohlov
    lorentso, так вы попробовали то что по ссылке или нет?
    Написано более года назад
  • Генерация картинок товара на сайте WP?

    andrhohlov
    Андрей Хохлов @andrhohlov
    А если решить это на фронтенде?
    Контейнер с фоном, в него выводить фото товара.
    Так можно будет и фон кастомизировать в зависимости от категории и т.д.
    Написано более года назад
  • Как передать computed data в дочерний template по клику?

    andrhohlov
    Андрей Хохлов @andrhohlov
    SolidMike, отложите Vue до момента как разберетесь с js
    Написано более года назад
  • Как передать computed data в дочерний template по клику?

    andrhohlov
    Андрей Хохлов @andrhohlov
    export default {
      data() {
        return {
          hotels: [],
          visibleHotels: [],
          selected_countries: null,
          selected_types: null,
          reviews_amount: '',
          checked_stars: [],
          price_range: '',
        };
      },
      methods: {
        applyFilters() {
          this.visibleHotels = this.hotels.filter(() => { /* логика фильтрации */ });
        },
        resetFilters() {
          this.selected_countries = null;
          this.selected_types = null;
          this.reviews_amount = '';
          this.checked_stars = [];
          this.price_range = '';
          this.applyFilters();
        },
      },
    }


    <HotelsList :listData="visibleHotels" />
    <button type="button" @click="applyFilters()">
    <button type="button" @click="resetFilters()">
    Написано более года назад
  • Duplicate keys detected: 'x'. This may cause an update error?

    andrhohlov
    Андрей Хохлов @andrhohlov
    Кирилл Горелов, собственно, у вас есть все что нужно для дебага.

    Проверьте что приходить в listdata и нет ли пересечений с cat_items.
    Задача - сделать так, чтобы все id в cat_items_sorted (соответственно в cat_items) были разными.

    Можно конечно в лоб решить, поменять ключ на индекс:

    <div is="cat-item" :itemdata="item" v-for="(item, idx) in cat_items_sorted" :key="idx">


    Но подозреваю что дубли товаров вам в списке не нужны.
    Написано более двух лет назад
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • Следующие →
Самые активные сегодня
  • felony13twelve
    felony13twelve
    • 5 ответов
    • 1 вопрос
  • mayton2019
    • 5 ответов
    • 0 вопросов
  • OoU
    • 5 ответов
    • 0 вопросов
  • Drno
    • 5 ответов
    • 0 вопросов
  • firedragon
    Владимир Коротенко
    • 5 ответов
    • 0 вопросов
  • CityCat4
    CityCat4
    • 4 ответа
    • 0 вопросов
  • © Habr
  • О сервисе
  • Правила
  • Обратная связь
  • Блог

Войдите на сайт

Чтобы задать вопрос и получить на него квалифицированный ответ.
Войти через центр авторизации