• Зачем нужены Gulp/Webpack?

    @xfg
    Webpack - это сборщик модулей, который позволяет писать модульный код, где каждый модуль имеет возможность импортировать различные зависимости, начиная от других модулей, до css стилей и изображений. На главной странице сайта даже есть пример, вы подаете на вход "модули с зависимостями", а на выходе получаете то, что сможет работать в браузере.

    Webpack - это просто крайняя точка развития идеи самовызывающихся функций, с помощью которых пытались решить проблему загрязнения глобальной области видимости, когда каждый скрипт подключенный к странице мог свободно обращаться к любым переменным и функциям из других скриптов, что приводило к различным проблемам, вроде случайного переопределения переменных, неявных зависимостей и необходимости строгой последовательности подключения скриптов. Эта идея затем переросла в requirejs, затем в browserify и вот в наши дни - webpack/rollup/parcel. Webpack анализирует зависимости, которые вы подключаете в вашем коде и собирает из этого конечный bundle, который сможет работать в браузере.

    Gulp - это менеджер задач для автоматизации различных рутинных операций, таких как минификация, тестирование, объединение файлов и тому подобное. Gulp в отличии от Webpack никак не анализирует ваш код. Он вообще ничего не делает и по-сути своей бесполезен.

    Gulp - это набор оберток-плагинов над различными утилитами. Это ведет к ряду проблем - плагины перестают поддерживаться разработчиками, плагины ломаются при очередном мажорном релизе Gulp, плагины не позволяют вам использовать новую версию утилиты, до тех пор, пока разработчик плагина не выпустит новую версию плагина совместимую с новой версией утилиты. Инструмент, который изначально возник, чтобы помочь решать возникающие проблемы, сам превратился в проблему. Это всё привело к тому, что от Gulp стали отказываться в пользу чистых утилит, которые теперь запускают через npm скрипты. Если посмотрите любые популярные open-source библиотеки, например bootstrap, то сможете заметить, что в 3 версии был Gulp, в 4 версии его не стало. Использовать Gulp сегодня не имеет смысла. Идея Gulp/Grunt - умерла, так как идея оберток-плагинов не принесла ничего, кроме дополнительных проблем.
    Ответ написан
    Комментировать
  • Интерактивная карта на сайте. Как правильно поступить с координатами?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    Вы можете в графическом редакторе переместить и масштабировать всю свою карту в SVG так, чтобы она была грубо говоря не от 0 до 100 (или какая она у вас там) по горизонтали, а от 19 до 169 (вроде бы, не силен в географии). И по вертикали так же подвинуть. И исходить из соображений, что координаты X/Y в SVG буквально равны нашим обычным координатам по широте и долготе. На восток и север - в плюс, на запад и юг - в минус. А перемещение на экране и масштабирование можно сделать с помощью атрибута viewbox, меняя его по ходу дела. Если вы руками рисуете, то таким образом можно получить точность в 1/4 градуса без умственных усилий, просто представив циферблат (0'/15'/30'/45' -> 0/.25/.50/.75), так что думаю, что для ваших задач, где точность не столь важна, это вполне подойдет.
    Ответ написан
    2 комментария
  • Можете посоветовать приложение для Android для заучивания слов на английском?

    @FreeArcher
    Senior 1С; php, JS Starter
    https://ankiweb.net/decks/
    там я купил колоду на 14000 слов. Но качество не очень понравилось озвучки и вобще подбор слов.

    Но britlex мне понравился даже больше. Там 5000 слов из которых выкинуто 600 элементарных и 1500 интернациональных. Т.е. самое, что нужно осталось. Стоит 190 р. всего.
    https://britlex.ru/dictionary.php

    Но вам правильно сказали, что просто учить слова без контекста не очень продуктивно.
    Ещё хороший способ учить слова по книгам, например таким
    https://libking.ru/books/sf-/sf-fantasy/123910-6-d...
    новые слава выписываешь в anki, например и учишь. В итоге как правило перевод не помнится, а вот контекст когда оно встречалось в памяти. Запоминается легче. Но тут есть проблема с произношением.

    По этому от целей.
    Для разговора надо учить какие-либо колоды. А для чтения лучше с книжек, там и реально часто встречаемые слова будут.
    Ответ написан
    Комментировать
  • Можете посоветовать приложение для Android для заучивания слов на английском?

    Zoominger
    @Zoominger
    System Integrator
    ED Words, Simpler, Duolinguo, Remember.
    Это то, что у меня.
    Ответ написан
    Комментировать
  • Как сделать такой SVG эффект?

    origami1024
    @origami1024
    went out for a night walk
    1) Линии через path.
    2) Круги на местах соединений - через svg элемент<marker>.
    3) Анимацию тегом animate.

    <svg viewBox="0 0 140 140" width=100vw height=100vh>
      <defs>
        <marker id="markerCircle" markerWidth="8" markerHeight="8" refX="5" refY="5">
            <circle cx=5 cy=5 r=3 />
        </marker>
      </defs>
      <path d="M20 20 L30 40 L70 20 L90 80" fill="none" stroke="red" marker-start=url(#markerCircle) marker-mid=url(#markerCircle) marker-end=url(#markerCircle)>
        <animate 
               attributeName="d"
               values="M20 20 L30 40 L70 20 L90 80;
                   M20 40 L30 10 L70 60 L90 110;
                   M10 10 L15 80 L120 70 L150 75;
                   M20 20 L30 40 L70 20 L90 80"
               dur="20s"
               repeatCount="indefinite"
               />
      </path>
    </svg>

    UPD: круги через svg marker
    Ответ написан
    Комментировать
  • Зачем используют Bower с Gulp?

    stanislav-belichenko
    @stanislav-belichenko
    Backend PHP Developer
    Разные разработчики имеют тот или иной опыт работы и тот или иной стаж. Соответственно, если сейчас вам уже проще использовать Gulp, да и сами разработчики Bower уже не рекомендуют его использовать для установки пакетов, то вы используете Gulp. Но кто-то начинал ранее, или же просто первым делом столкнулся с Bower, и стал использовать изначально его.

    Практического смысла в данный момент использовать именно его нет, раньше это имело смысл, когда Bower рекомендовали использовать для пакетов для фронта, а npm (не важно как, через Gulp или впрямую), использовать для бекенда - связано это было с тем, что первый не тянул зависимости для каждого пакета в свою личную папку, они устанавливались в общую, и таким образом папки с пакетами для фронта были более чистыми, а зависимые пакеты - общими.

    Но при этом использовать везде Gulp для управления пакетами тоже нет смысла, так как для простых проектов это плюс один инструмент, который не факт, что нужен. Кому-то будет проще использовать чистый package.json и просто указать в инструкции своего проекта, что нужно запустить установку пакетов из него.
    Ответ написан
    Комментировать
  • Почему так нежелательно использовать JS во время верстки?

    Zoominger
    @Zoominger
    System Integrator
    Да плевать, присобачивайте неоптимизированный *.js на 550 Кб ради одной-единственной функции, с чего вдруг вас волнуют батареи пользователей и их процессоры? Не плевать ли, что браузер будет тупить, тормозить, выбешивать пользователя и высасывать трафик?

    Да и головой не надо думать, шлёп-шлёп и в продакшон, не надо там корпеть над этими невероятно трудными тегами и CSS, к тому же своё время сэкономите, оно ведь так важно для человечества.

    Так что поддержу, JS - наше всё, нищуков с телефонами ниже iPhone X за людей не считаем.
    Ответ написан
    1 комментарий
  • Как сделать насквозь прозрачный блок в див?

    SmthTo
    @SmthTo Куратор тега CSS
    Все перепёлки мира будут оплакивать мою смерть.
    Лёгкого пути тут нет, к сожалению. Inset-закругления нет в CSS на данный момент. Только через градиент (адаптивно и всё такое) или картинкой на фон (не очень адаптивно, или через border-image (адаптивно, но с помощью картинки), или кучей блоков (адаптивно).

    В данном случае идеально подойдёт градиент (второй пример):

    Ответ написан
    Комментировать
  • Свойство transition?

    notiv-nt
    @notiv-nt
    Как ваше ничего? Да, моё тоже
    display не анимируется
    https://www.quackit.com/css/css3/animations/animat...
    Ответ написан
    Комментировать
  • Какую программу для скриншотов с онлайн-выгрузкой используете (Win10)?

    delphinpro
    @delphinpro
    frontend developer
    Попробуйте https://getsharex.com/ с выгрузкой на собственный хостинг. Точно не будет никакой рекламы.
    Ответ написан
    Комментировать
  • Есть ли удобный color picker (пипетка) для windows 10?

    @an_tropa
    Пользуюсь InstantEyedropper если нужна палитра то Instant Color Picker
    Ответ написан
    Комментировать
  • Почему не убирается underline?

    @FabiBoom
    Свойство text-decoration не наследуется, а применяться на весь контент и отменить не получиться.

    Оберни (например, в span) только текст , который нужно подчеркнуть и задай именно ему text-decoration: underline.
    Ответ написан
    2 комментария
  • Ширина svg с ширину родительского элемента?

    @xonar
    А смысл?
    У вас в svg уже прописаны размеры, оно и не будет растягиваться в данном случае.

    <svg width="100" height="20"
    ширину, высоту убираем и будет растягиваться.
    Ответ написан
    Комментировать
  • Fork на github. Верно ли моё понимание?

    HeadOnFire
    @HeadOnFire
    PHP, Laravel & WordPress Evangelist
    Fork - это клон репозитория со всей историей и состоянием на момент его создания. При этом сохраняется связь с оригинальным репозиторием и можно по желанию синхронизировать данные в свой форк оттуда или же делать pull requests в оригинальный репозиторий.

    С какой целью вы делаете себе форк - дело десятое. Если код в оригинальном репозитории позволяет модификацию (open-source), можете с ним делать что хотите - затачивать под себя, разрабатывать фичу которую потом отправите в оригинальный проект и тд. Если делаете модификации чисто для себя - с авторами оригинального проекта ничего согласовывать не нужно. Если хотите фичу им предложить - тогда сначала заведите issue в оригинальном репозитории, обсудите если надо и потом делайте форк и предлагайте pull request.
    Ответ написан
    Комментировать
  • Как заставить браузер создавать неявные колонки, а не строки в css grid?

    rockfeeler
    @rockfeeler
    Фронтендер, дизайнер, верстальщик-перфекционист
    В таком случае совершенно неявно использовать неявный грид, лучше использовать явные колонки. И вообще, если задача определена, то лучше использовать ту технологию, которая лучше всего отвечает условиям, а не изобретать костыли.
    Ответ написан
    1 комментарий
  • Как сделать круглый логотип с линией подчёркивания, кроссбраузерно?

    profesor08
    @profesor08 Куратор тега CSS
    Круг и дуга снизу это svg, плоски это псевдоэлементы шириной 99999px. Можешь обойтись без svg, но тогда придется делать несколько враперов для круга, чтоб сначала отобразить круглую обводку, потом белую, потом перекрыть круглую чтоб была дугой.
    Ответ написан
    2 комментария