Задать вопрос
  • Как определить изменение состояния видимости элемента?

    Mike_Ro
    @Mike_Ro Куратор тега JavaScript
    Python, JS, WordPress, SEO, Bots, Adversting
    Расширю ответ imko кодом:
    // return true, if element visible
    function isVisible(element) {
      return window.getComputedStyle(element).display !== 'none';
    }
    
    // MutationObserver
    const observer = new MutationObserver((mutations, obs) => {
      const modal = document.querySelector('#modalWindow'); // modal selector
      const dropdown = document.querySelector('#dropdownMenu'); // dropdown menu selector
    
      // check is visible?
      if (isVisible(modal) && isVisible(dropdown)) {
        console.log('Element is visible');
        obs.disconnect();
      }
    });
    
    // config
    const config = {
      attributes: true,
      attributeFilter: ['style']
    }
    
    // run
    observer.observe(document.querySelector('#modalWindow'), config);
    observer.observe(document.querySelector('#dropdownMenu'), config);
    Ответ написан
    1 комментарий
  • Что делать, не работает useEffect?

    Любая ошибка описывается библиотекой в консоли. Ты можешь посмотреть и уже после этого анализировать почему лог не отрабатывает
    Ответ написан
    Комментировать
  • Как подключить код из .js в main.js через @@include?

    sergey155
    @sergey155
    math.js
    const add = (a, b) => {
      return a + b;
    };
    
    const subtract = (a, b) => {
      return a - b;
    };
    
    module.exports = { add, subtract };


    main.js
    const math = require('./math.js');

    В помощь

    01:08:03 Работа с JavaScript (babel, webpack)
    Ответ написан
    Комментировать
  • Что изменить в коде, чтобы прокрутило автоматически до конца страницы?

    yarkov
    @yarkov Куратор тега JavaScript
    Помог ответ? Отметь решением.
    мне из-за одного момента в жизни связанного с кодом надо прочитать книгу?

    Ну можешь что-то положить на пробел и уйти чай попить. Оно само доскроллится.
    Ответ написан
    Комментировать
  • Можно ли задать направление изменения цвета?

    Alexandroppolus
    @Alexandroppolus
    кодир
    Попробуй анимировать background: linear-gradient
    Ответ написан
    2 комментария
  • Сборка бюджетного ПК, запустится?

    Rsa97
    @Rsa97
    Для правильного вопроса надо знать половину ответа
    Даже не соберётся. Процессор от AMD на сокет AM4 не встанет в интеловский сокет LGA1200.
    Ответ написан
    Комментировать
  • Есть ли смысл применять React для написания простого сайта?

    bootd
    @bootd
    Гугли и ты откроешь врата знаний!
    Нет, не стоит!

    Да во первых размер бандла нормально так уменьшится, т к сейчас сайт существует без разделения на страницы - просто одна большая. Я хочу разделить сайт на куски и подгружать их чанками.

    Что принципиально решит вопрос, 1 js файла на 1мб, либо 10 файлов суммой на 1мб? Вот щас там нет реакта, он условно весит 1мб. А будет реакт, станет js меньше весить что ли?

    Вы по всей видимости не совсем догоняете, в чём смысл чанка и почему их разделяют.

    В общем сайт сейчас немного медленный:

    но большой и с ипользованием большого количества картинок.

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

    React, Vue, Ember, Angular, Svelte - это не про оптимизацию загрузки сайта. Их магический JS не умеет загружаться быстрее обычного js кода. Может стоит научиться делать базовые оптимизации без фреймворков?
    Ответ написан
    1 комментарий
  • Как структурировать код, архитектура проекта?

    bootd
    @bootd
    Гугли и ты откроешь врата знаний!
    Проблема в том, что многие курсы рассказывают о различных web терминах, в
    результате чего возникает каша, поскольку не знаешь где и что применять
    Возьмём патерны проектирования, MVС, модуль и так далее. Насколько я понимаю они
    и решают проблему разбивки кода...
    В текущем, современном этапе разработки такими паттернами почти не пользуются. Сейчас у нас есть import/export - вот он ваш, нативный модуль. В остальном, просто положитесь на фреймворк.

    Как подходить к оформлению кода, если мы не используем фреймворк Vue или иной...

    Любой клиентский фреймворк - это уже своего рода архитектура, просто нужно следовать в начале пути общепринятым правилам. В отношении vue почитать про best practices. В этой папке компоненты, в этой папке сервисы, в этой папке утилиты, в этой папке типы и т.п. Разделяйте макет на части. Отдельный компонент фильтра, который состоит из множества компонентов самого фильтра, чекбокс фильтр, фильтр диапазона и т.п. Отдельно компонент товара и т.д.

    Дмитрий Лаврик сказал, что бэкенд программисты в последнее
    время создают API для сайтов. Так намного проще создавать бэк

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

    Можно ли при помощи VUE создать fullstack приложения или без создания той же
    структуры базы данны никак?

    На vue нельзя написать фулстек, как и на react. Это браузерные фреймворки(клиентские), предназначенные для работы в браузере.

    База данных - это всего лишь термин, который говорит, что есть какое-то хранилище данных. Им может быть любая из популярных БД или просто файлик(или множество файликов). Просто где лежат записи. Любое ПО, в котором вы можете редактировать или создавать записи, должно иметь базу данных, иначе никак.

    выучил JS на уровне решении задач средней сложности

    Ну вам не кажется что из вышеперечисленного вами, вы не выучили js. Средней уровень сложности(хотя что можно считать "средним уровнем сложности" - это ещё вопрос), это наверно где-то джун+. А такие джуны уже умеют пользоваться инструментами.

    Личный мой вывод:
    Вы как и все начинающие окунулись в болото под названием js. Где царит хаос и анархия, когда можно всё, но не понятно как. У меня главный вопрос к таким людям, а зачем вам на данном этапе вашего развития "всё"? Ну вот серьёзно, зачем? Зачем вам сейчас знать, как устроена БД, как правильно создавать таблицы, как правильно создавать связи в них, зачем микросервисы, зачем, о госпади микрофронты, SSR, PWA, FullStack, Nodejs, Docker, Kubernetes, webpack, vite, TypeScript и прочая херня, которой полон мир фронтенда. Зачем вам всё это, если вы сами не можете ответить на этот вопрос. Зачем вам сейчас знать, как это работает. Если вы просто сайтик с чекбоксиками не можете сделать. Т.е. простая фильтрация html кода. Возьмите какую нибудь публичную rest api с фейковыми данными для своей песочницы и постройте маломальский сайтик с фильтром. Зачем вам фулстек? Почувствовать себя гением разработки? Забудьте про кучу не понятных терминов, просто выкиньте их из головы.
    Зачем вам вообще vue или реакт, или им подобные? У вас в голове хоть есть понимание, зачем придуманы эти штуки, какую задачу то они призваны решать? Почему все так "дрочат" на эти SPA? Почему +- 90% вакансий фронта требуют знания SPA фреймворков? Каждый инструмент призван решать какую-то задачу, пока вы не поймёте, почему вам реально нужен этот инструмент, не трогайте его, пускай лежит до лучших времён.

    Просто возьмите js или хрен с ним, возьмите vue, сделайте внутри ajax запрос, получите данные, отобразите их. Где в этих словах какие-то особенные или сложные термины? Вам идиоты напихали в голову сложных конструкций, вот вы и мучаетесь. Упростите себе жизнь, выкиньте из головы всякую хрень. Просто сядьте и пишите, не думая ни о чём! Просто берёте vue, разворачиваете как в доке написано и готово, работайте.
    А когда сделаете, перекурите, а потом сядьте и посмотрите на своё творение и подумайте, как можно улучшить, возможно упростить. Не ждите быстрого успеха!

    КОВАТЬ, КОВАТЬ И ЕЩЁ РАЗ КОВАТЬ! Только так можно научиться.

    Никакая архитектура вас не спасёт, пока вы сами не поймете, а зачем она мне. Вот пока у вас нет понимания, что мне нужна какая-то там архитектура, т.к. вы в этот момент поняли, какую проблему вам нужно решить, вот только тогда и начинайте что-то думать в эту сторону. К этому моменту, у вас уже будет что-то структурированное в голове и понимание.
    Ответ написан
    Комментировать
  • С чего начать изучение верстки?

    BloodyAstra
    @BloodyAstra
    Верстка, как впринципе и все в IT надо учить на практике.Придумайте проект и реализуйте его.
    Если не можете придумать свой проект, то просто выберете сайт, и сделайте его копию, что не поймете как верстать, всегда сможете посмотреть в коде этого сайта
    Ответ написан
    Комментировать
  • Как сделать так, чтобы в VS Code список новых тегов в html был с новой строки?

    @wibiwa Автор вопроса
    UPD. Нашла решение.
    Если кому-то нужно:

    в файле settings.json прописать следующую команду:

    "emmet.preferences": {
          "output.inlineBreak": 1,
        }

    648ff3cc05dc1740423401.png
    Ответ написан
    Комментировать
  • Реально ли заменить gulp на vite?

    bingo347
    @bingo347
    Crazy on performance...
    Есть сборщик gulp
    То что под gulp есть сборщики не делает сам gulp сборщиком. Gulp - task runner, запускалка задач. То есть сборщик под капотом может быть любой, хоть тот же vite.
    Теперь про vite, основная его фишка - это ускорение dev сборок и за счет этого ускорение самого процесса разработки. Достигает он это за счет того, что по сути не собирает Ваши исходники, а только применяет к ним трансформации, хотя зависимости все же собирает с помощью esbuild. При этом для прода вся сборка переадресуется на rollup. И то что в dev и в prod у Вас будут по сути разные сборщики изредка приводит к багам, которые воспроизводятся только в prod сборках. Rollup надо сказать тоже не идеален и на больших проектах порой ломает код, хоть и редко.
    Тут мое ИМХО и не более
    Rollup для сборки библиотек.
    Webpack для сборки конечных приложений.
    Vite интересен скорее интегрированным в него vitest, который позволяет писать unit тесты ближе к логике (привык я к хорошему в Rust).

    А по факту, смена сборщика чревата ошибками, сильными изменениями в структуре проекта и прочими подводными камнями.
    Если вопрос "стоит ли переезжать" появился только из hype-driven-development (погоней за модой по-простому), то ответ однозначный - нет, не стоит.
    Если же текущая сборка накладывает на Вас сильные ограничения и борьба с этими ограничениями занимает очень много времени, настолько, что потенциальные проблемы от смены сборки скорее всего займут времени меньше, то да, стоит переезжать.
    Ответ написан
    1 комментарий
  • Почему селектор :not не срабатывает первый раз?

    Aetae
    @Aetae Куратор тега JavaScript
    Тлен
    Потому что селектор div.filtr form ul li:not(.sf-field-sort_order) выбирает все li(кроме .sf-field-sort_order) которые находятся внутри div.filtr form ul, т.е. и <li>тест</li> в том числе. Если тебе нужны только прямые потомки, то надо писать так:
    div.filtr > form > ul > li:not(.sf-field-sort_order)
    и тогда всё будет работать как ты задумывал.
    Ответ написан
    Комментировать
  • Как сделать, чтобы сайт быстрее загружался?

    dima9595
    @dima9595
    Junior PHP
    Sass, less, gulp и прочие сборщики ни как, практически, не улучшат скорость загрузки. Да, через сборщики можно уменьшить тот же самый css файл посредствам минификации, но это дело другое..
    В вашем случае у вас крайне мало файлов для каких-либо серьёзных проблем.

    Из советов из своего опыта могу выделить следующее:
    1. Разбейте css файл на важные и не особо важные части. В важном - основа страницы, сбросы стилей и т.п. В неважном - всякие красоты и т.п.
    2. Сожмите все css файлы.
    3. Сожмите все используемые картинки. В качестве бонуса можно сделать их в формате webp, но используйте их как запасной вариант, так как не все старые браузера поддерживают этот формат.
    4. Запустите сайт и проверьте загрузку через специальные средства (Google Pagespeed, например) и встроенными средствами браузера. Так вы увидите слабые места загрузки.
    5. Оптимизируйте JS скрипты, проверьте что бы они правильно подключались и загружались после прогрузки страницы.
    Ответ написан
    Комментировать
  • Как стилизовать яндекс карту?

    Метки на карте - через кастомные балуны и метки.
    https://yandex.ru/dev/maps/jsbox/2.1/placemark
    https://yandex.ru/dev/maps/jsbox/2.1/balloon_and_hint

    Прозрачную менюшку можно через custom_control сделать: https://yandex.ru/dev/maps/jsbox/2.1/custom_control
    Ответ написан
    2 комментария
  • Как при скроле Y оси вниз у body скролить X элемента и фиксировать body scroll пока не закончится скрол у X?

    @goshaLoonny
    Используйте position: sticky когда пользователь начинает скроллить на контейнере и обрабатывайте скролл уже через js
    Ответ написан
    3 комментария
  • Почему не видит 'this' в объекте внутри класса?

    @Yaroslav1734
    Вы объявляете bar в словаре а не в классе, вот решение:

    class foo {
        
        bar = `Привет`;
        o = {
            baz: this.bar + `, Мир!`
        };
    
    }
    Ответ написан
    Комментировать
  • Как взаимодействовать с глобальной переменной из webpack?

    sharp97
    @sharp97
    не фонтан но брызги есть
    попробуй следующим образом объявить переменную
    window.postId = 'твоё значение'
    либо вот
    тык
    тык2
    Ответ написан
    Комментировать
  • Почему верстальщики обычно вырезают круглую картинку квадратом?

    delphinpro
    @delphinpro Куратор тега Вёрстка
    frontend developer
    Потому что часто, почти всегда, изображения на боевом сайте управляются через админку. И условная девочка-контентщица не будет заморачиваться с подготовкой картинок под вашу верстку, просто загрузит любую. Наоборот, ваша верстка должна быть универсальной.
    Ответ написан
    Комментировать