Задать вопрос
kossmos

Юрий Кравчук

Frontend разработчик
Лайки

  • Vue3 option api cdn, как дождаться построения элементов с помощью v-for и только потом обратиться к ним?

    Fragster
    @Fragster
    помогло? отметь решением!
    Мои телепатические способности говорят мне, что автор получает данные, выводит их в шаблон а потом хочет через DOM что-то с этим сделать (зачем?). В данном случае поможет nextTick
    Ответ написан
    2 комментария
    2 комментария

  • Не могу адекватно интегрировать шрифты Nuxt3?

    Aetae
    @Aetae
    Тлен
    Шрифты всегда и везде мерцают если не в кэше. Единственный способ надёжно избежать этого - ничего не показывать пока шрифт не загрузится - т.е. отображать лоадер или ещё что. "Не надёжно" это можно сделать просто поигравшись со свойством font-display.
    Наверняка же дождаться загрузки помогут соответствующие библиотеки, например webfontloader или напрямую Font Loading API.

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

    К сожалению из-за cache partitioning в современных браузерах использование всяких cdn для шрифтов, делу никак не поможет, т.к. для каждого сайта всё равно своё кэш.
    Ответ написан
    Комментировать
    Комментировать

  • Как правильно отобразить компоненты в Components Tree Nuxt 3?

    @null_object
    Это стандартное поведение компонента <NuxtPage /> и не является проблемой, он внутри себя использует <RouterView /> из vue-router в который добавляется внутренняя логика Nuxt (например добавление Transitions если они указаны в настройках). Anonymous Component на самом деле - компонент RouteProvider, который занимается перерисовкой страниц. В общем, просто обертка фреймворка для роутинга.

    RouteProvider добавляется тут. Код самого провайдера можно тут посмотреть.
    Ответ написан
    Комментировать
    Комментировать

  • Как динамически изменять цвет контента блока в зависимости от фона?

    Mike_Ro
    @Mike_Ro Куратор тега JavaScript
    Python, JS, WordPress, SEO, Bots, Adversting
    1. Использовать IntersectionObserver для отслеживания момента пересечения необходимых элементов..
    2. Изменяем стили как угодно, если п1 выполнен.
    Ответ написан
    Комментировать
    Комментировать

  • Bootstrap-Vue - В чём фишка данного симбиоза?

    copist
    @copist
    Empower people to give
    Расскажите плиз о технологии, и чем развёрнутей, тем лучше.

    Вот захотел ты сделать сайт SPA или PWA с любимой тебе вёрсткой на базе Twitter Bootstrap и любимой библиотеки Vue. Сверстал. Поповеры не появляются, дропдауны не выпадают, модалки не открыватся, формы не валидируются, клики не работают.

    Оригинальный Twitter Bootstrap имеет поддержку интерактивных элементов на Javascript. Реализовано это на библиотеке jQuery. Если делаешь на Vue, придётся подключать ещё и jQuery, что лишняя библиотека на 100+ килобайт, что, конечно, не катастрофа (пока ты не на мобилке).

    Vue работает с состояниями привязывает данные к отображению, а jQuery работает с DOM и событиями. Это вопрос производительности. Работа JQuery начитается когда загружен и распарсен JS и HTML. Работа Vue начинается в тот момент, когда загружен и распарсен JS, то есть чуть раньше. jQuery модифицирует DOM на лету, перестраивая текущий документ. Vue работает с shadow DOM, а затем подсовывает уже готовую интерактивную страницу в пустой документ, что быстрее (разница в секунды на десктопе, десятки секунд на м...).

    Vue реализует компонентную парадигму. Куски страницы являются изолированными кусочками кода (HTML CSS JS), которые цепляются между собой динамически, а обмениваются данными через аттрибуты и события. Предположим, что вы решили следовать компонентной парадигме, тогда согласно вот такому примеру нужно будет увязать самостоятельно все интерактивные компоненты. Компонента-кнопка. Компонента-поле ввода. Компонента-форма. Компонента-контейнер. Получается около 50 компонент. Для некоторых надо будет написать логику на jQuery. Если посмотреть на код jQuery этих микрокомпонент, то он окажется несложный, его вполне можно переписать на Vue. Ну там класс заменить или клик отработать. Когда от кода jQuery не останется следа, его можно будет из проекта удалить.

    И вот получается Bootstrap-Vue

    На компоненты побили. От Jquery избавились. Написано в единой парадигме. Работает быстрее.

    Добавляем тот факт, что в Vue можно не импортировать компоненты, которые не нужны (например, я не работаю с дропдаунами и модальным окнами) и код становится меньше, грузится быстрее, работает быстрее.

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

    Это сам изучай и сравнивай. Навыки и опыт воздушно-капельным и через Internet не передаётся
    Ответ написан
    4 комментария
    4 комментария

  • Как собрать связку nginx, front, back с помощью docker-compose?

    fox_12
    @fox_12
    Расставляю биты, управляю заряженными частицами
    А в чем собственно проблема?

    Gitlab CI/CD загружает новую версию репозитория - в ./local-back или ./local-front, и дергает перезапуск docker-compose

    docker-compose.yml который лежит в папке выше имеет примерно такой вид:

    nginx:
   ...
   volumes:
   - ./local-back:/container/back
   - ./local-front:/container/front
  ...

back:
  ...
  volumes:
  -./local-back:/container/back
  command: тут скрипт который конфигурит бэк и запускает его

front:
  ...
  volumes:
  -./local-front:/container/front
  command: тут скрипт который конфигурит фронт, собирает статику, или что он там делает..


    nginx видит бэк как back - соотвественно адресует запросы ему, видит и папку с бэком чтобы брать файлы оттуда при необходимости (загружаемое медиа и пр.)
    nginx также видит папку с фронтом откуда берет статику и прочее
    Ответ написан
    1 комментарий
    1 комментарий

  • Как собрать связку nginx, front, back с помощью docker-compose?

    @vitaly_il1
    DevOps Consulting
    Проект с беком ничего не знает про nginx.

    Он и не должен вроде? Только фронту нужен URL  backend?

    Насчет основного вопроса: я не работал с Gitlab CI, но в Jenkins я бы просто брал код из разных репо, строил images и запускал в docker-compose. Вроде этого:
    https://stackoverflow.com/questions/59712578/multi...
    Ответ написан
    1 комментарий
    1 комментарий

  • Как собрать связку nginx, front, back с помощью docker-compose?

    @noremorse_ru
    А зачем один конфиг на разные проекты?
    Пробовал nginx с docker-compose держать в отдельном проект, удобно, но... деплоить приходится руками, т.к. этот проект ничего не знает про фронт и бек.

    В смысле он ничего не знает? Тебе нужно придерживаться микросервисной архитектуры, когда сервису ничего не нужно знать, кроме того, куда пулять http запрос. Пусть твой балансировщик проксирует / на фронт, а /api/ на бэк или как там у тебя урлы построены и всё.
    Ответ написан
    1 комментарий
    1 комментарий

  • Чем отличается react от vue, основное отличие?

  • Vue.js + Wordpress?

    boratsagdiev
    @boratsagdiev
    Чтобы совместить эти две вещи, вам не нужны шаблоны Wordpress. Как я вижу разработку с этими двумя:

    - WP отдаёт в rest API нужные данные (он это умеет по умолчанию, вроде только нужно поставить плагин чтобы включить). Это ваш бэкенд.
    - На VueJS вы пишете весь фронтенд - то есть вся вёрстка шаблона находится именно во vue-файлах, так же как и вся логика по получению постов, категорий, комментариев и прочего из бэкенда WP.
    Ответ написан
    1 комментарий
    1 комментарий

  • Как лучше писать стили CSS Modules или Styled Components?

    jeerjmin
    @jeerjmin
    Мне нравится использовать CSS Modules. Можно в каждом компоненту определять стили с одним и тем же названием, например "container", а не "appbar-container", "appbar2-container" итд и не париться, что он встречается в другом компоненте.
    Ответ написан
    Комментировать
    Комментировать

  • Как написать большое приложение на Vue.js и не умереть?

    @Buzzzzer
    Возможно что то не так в конфигах webpack ?

    У меня сейчас в проекте порядка 600+ vue компонентов.
    Пересборка в dev с hot reload занимает 2-5 сек.
    (win, ram 16gb, ssd, какой то старенький i3)
    Ответ написан
    4 комментария
    4 комментария

  • Как внедрять vue.js в существующий проект?

    @VaniXac
    17 лет
    1. Ставишь vue-cli (в документации инструкция по установке).
    2. Делаешь нужные компоненты
    3. Собираешь (npm run build)
    4. Собранный build.js подключаешь на нужной странице
    Ответ написан
    Комментировать
    Комментировать

  • Как не распыляясь дотащить до front-end мидл девелопера?

    @iv_k
    Отличие джуна, мидла и сеньера не в количестве страшных узнаваемых ими слов, а в уровне постановки задач.
    джуну задача ставится - ну ка запили мне класс/функцию,
    мидлу - запили ка мне приложение,
    сеньеру или тимлиду - вот тебе требования, вот тебе документы по процессу, вот команда. пилите.
    утрированно как-то так
    ps
    да, ответ на вопрос. работать и брать на себя больше ответственности
    Ответ написан
    Комментировать
    Комментировать

  • Как создавать архитектуру JavaScript приложений?

    @Elizavetta
    Matroid: gamedev/js-разработка
    Паттерны в JS уже прочитали?
    Возможно, вы не уделяете внимание рефакторингу по мере написания приложения. Про рефакторинг можно много читать, например вот
    Ответ написан
    Комментировать
    Комментировать

  • Какой CSS препроцессор выбрать?

    IonDen
    @IonDen
    JavaScript developer. IonDen.com
    Все топовые препроцессоры дают примерно равный набор возможностей и очень очень мощны. Всегда найдутся люди, которые будут говорить, что им нравится X-препроцессор, ибо там есть киллер-фича без которой они не могут жить, но это всё вкусовщина. Так что просто выбирайте тот препроцессор, синтаксис которого вам будет по душе. Вот и весь принцип.
    Ответ написан
    Комментировать
    Комментировать

  • Как вы используете git при разработке в одиночку?

    Adamos
    @Adamos
    Для себя одного git, как мне кажется, нужен только как "машина времени" и "обратный роадмап".
    То есть, чтобы иметь возможность посмотреть более ранний вариант кода и чтобы в потоке коммитов найти, когда были какие-то конкретные изменения.
    По большому счету, ничего, кроме коммитов в мастер, тут и не требуется. Разве что желательны мелкие коммиты с осмысленным написанием изменений, а не куски того, о чем сам не вспомнишь через неделю.
    Ответ написан
    6 комментариев
    6 комментариев

  • Как изучать, что то новое имея фуллтайм работу?

    trevoga_su
    @trevoga_su
    Изучать на работе. Мне когда работа "позволяла" это делать - я и изучал и/или свой проект писал.
    Да-да. Именно так. Совесть пусть идет в жопу.

    Остальные советы - это бред школьников.
    Если человек спрашивает, значит у него реально нет времени. Если есть семья - то подавно.
    Если устает - то значит устает. Я помню, что значит тратить на дорогу 4 часа в день.
    По вых лучше не работать слишком много - реально можно перегореть. Сам сгорал не один раз.
    Оптимальное время для всего этого дела - будни.
    Ответ написан
    7 комментариев
    7 комментариев

  • Какие технологии использовать для быстрой верстки?

    HollowJ
    @HollowJ
    PHP разработчик
    Emmet - ускоряет формирование html.
    SASS, LESS, Stylus - CSS препроцессоры (также есть постпроцессоры).
    Gulp, Grunt, Webpack - помогают собирать проекты. По сути менеджеры задач по компиляции sass, less, coffee и т.д. и сборки этого всего в пару файлов.
    Для ускорения верстки также порекомендовал бы использовать CSS фреймворки типа Bootstrap, Foundation. Но не злоупотреблять стилями по-умолчанию =)
    Ответ написан
    Комментировать
    Комментировать

  • Верстаю сайт, получаю от заказчика "недочет" как быть)?

    Serj-One
    @Serj-One
    i'm sexy and i know it
    Вообще, макет перед работой нужно смотреть, и если область контента не соответствует стандартам, обсуждать это ещё до начала работ. Если макет не 1:1, и заказчик об этом заранее не упоминал, шлите со всеми претензиями к хренам собачьим, а за доработки требуйте доплату. На будущее, всегда требуйте от заказчика детальное ТЗ, по которому работа будет приниматься.
    Ответ написан
    2 комментария
    2 комментария