• Что за проблемы с наложением, бордерами в хроме в последнее время?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Этот "баг" - проблемы округления размеров элементов до целого количества пикселей. Разработчики хрома всегда имели с этим сложности. Если погуглить - у них там кучи обсуждений открыты на тему того, что размеры в разных браузерах считаются как-то слишком по-разному, и логика размеров в хроме оставляет желать лучшего. В последние месяцы и правда стало даже хуже, чем было раньше. Проблема с вот этими отступами стала появляться в старом коде, который раньше работал нормально.

    В большинстве случаев это решается размерами и расположением элементов в духе calc(100% + 0.5px). В зависимости от логики в дизайне значения меняются, но логика остается - добавляем к значениям в коде доли пикселя до тех пор, пока не начнет округляться нормально. Иногда, если там картинка, помогает font-size: 0 для контейнера картинки. Все это лютые костыли, и так оно не должно работать, но более толкового решения пока не наблюдается. Это баг браузера, который мы не контролируем.
    Ответ написан
    Комментировать
  • Почему не подтягивается существующий файл?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    Ошибка importScripts is not defined не говорит о том, что файла не существует. Она говорит о том, что функции importScripts нет в том контексте, в котором все выполняется. В стандартном глобальном Window ее нет. В WorkerGlobalScope она есть. Нужно убедиться в том, в каком контексте выполняется ваш код. Что есть self в вашем коде. Тут многое зависит от того, как вы делаете свое приложение и как создаются эти воркеры (в некоторых фреймворках может своя локальная магия происходить). Есть неиллюзорная вероятность, что ваш код воркера загружается два раза. И запускается два раза. И первый раз он запускается в основном потоке, где self - это получается window. Если это так, то можно сделать запуск кода воркера из тупой проверки-заглушки, что-нибудь вроде:
    if (typeof importScripts === 'function') {
        importScripts('......js');
        // и все остальное тут
    }

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

    sfi0zy
    @sfi0zy
    Creative frontend developer
    цифры мешают нажимать на места, а z-index изменить не получается

    У SVG-элементов есть атрибут pointer-events. Работает он по той же логике, что и в CSS. Так что можно выключить интерактивность цифр, или что там еще мешает.

    А "z-index" там работает по принципу "что раньше нарисовано - то ниже, что позже нарисовано - то выше". А отрисовывается все в том порядке, в котором оно в SVG-коде написано.
    Ответ написан
    1 комментарий
  • Почему не работает font awesome?

    sfi0zy
    @sfi0zy Куратор тега HTML
    Creative frontend developer
    В начале файла стилей видно, что вы подключаете Font Awesome Free 6.2.1. Иконка fa-forward в нее входит, а вот иконка fa-arrows-repeat-1 уже входит в Pro-версию, а не Free. Для ее использования вам нужно $99 в год.
    Ответ написан
    1 комментарий
  • Проблема с подключением Swipper, как устранить?

    sfi0zy
    @sfi0zy Куратор тега HTML
    Creative frontend developer
    Ошибки вида

    ... MIME type (‘text/html’) is not Executable ...

    или

    ... MIME type ('text/html') is not a supported stylesheet MIME type ...

    появляются обычно или если сервер путает типы данных (маловероятно, если до подключения этих файлов все работало, хотя бывает), или если у нас неправильные пути к файлам (более вероятно). Вполне возможно, что сервер отдает 404 страницы, которые по очевидным причинам не являются стилями или скриптом, который можно выполнить. Проверьте, что по этим ссылкам вообще есть эти стили и скрипты. Скорее всего пути к файлам неверные.
    Ответ написан
    Комментировать
  • Как сделать анимацию кардиограммы?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Вообще рисование линий обычно делается через изменение свойств stroke-dasharray и stroke-dashoffset у кривых в SVG. Это самый простой способ в рамках фронтенда, хотя и изначально эти вещи были для другого придуманы. Но в случае с ЭКГ нужна постоянная скорость рисования по горизонтали. Поэтому можно взять прямоугольную маску в рамках той же SVG, и двигать ее в сторону:

    Ответ написан
    6 комментариев
  • В Chromium на Linux ничего не происходит при нажатии "Сохранить как"?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    Учитывая, что в тегах вопроса значится kali, можно предположить, что вы запускаете браузер из-под рута, и он запускается в режиме песочницы, без доступа к реальной файловой системе. Защита от дурака, так сказать. Можно попробовать добавить флаг --no-sandbox при его запуске, или, что более безопасно, запустить его из-под обычного пользователя.
    Ответ написан
    Комментировать
  • Gulp-notify неправильно выводит уведомление об ошибке. С чем это связано?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    Строки, которые в gulp-notify используются в качестве параметров в разных местах, могут быть шаблонными строками для использования в _.template. В вашем случае это определенно так. И похоже, что у вас там закралась опечатка:

    - 'Error: <%= error.message $>'
    + 'Error: <%= error.message %>'


    Из-за чего шаблонизатор не понимает, что с этим делать, и оставляет строку, как она есть.
    Ответ написан
    1 комментарий
  • Как сделать анимированную трансформацию svg при hover?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    Для начала нужно определиться с двумя вещами:
    1. Safari не очень дружит с морфингом SVG из CSS. Это относится не только к clip-path, но и к любому изменению контуров в самих SVG. Поэтому вариант делать это на CSS - такой себе вариант.
    2. Для того, чтобы морфинг работал, нам нужно, чтобы контуры в SVG имели одинаковую структуру. Это первое правило морфинга. Почему это так, и в чем смысл морфинга в целом - можно почитать тут. Если вы делаете капли в blobmaker.app, то вам нужно иметь кляксы, сделанные с одним положением левого ползунка, который меняет количество точек. Правый двигать можно, рандомизировать можно, но количество точек должно быть постоянным.

    Ну а дальше весь вопрос будет в том, с помощью чего организовать конечный расчет промежуточных значений для наших кривых. Можно взять любую библиотеку для интерполяций значений, например anime.js:

    Ответ написан
    Комментировать
  • Зачем нужен вебпак простым языком?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    Вебпак - сборщик. Может взять много файлов и собрать в один. Ну или в несколько, как мы настроим. В js действительно есть модули, которые как бы уже нативно работают в современных браузерах, но есть ряд проблем:

    • Файлов с кодом может быть много. Сотни. Если использовать нативные импорты и загружать сотни файлов в браузер одновременно - накладные расходы будут заметными. Было бы хорошо уменьшить количество файлов. Плюс там могут быть не только скрипты, но и другие файлы, которых тоже может быть много.
    • Большое количество инструментов были написаны еще до появления нативных модулей в JS. Они все еще работают, выполняют свои задачи, но простым словом import их не импортировать. Там очень разные чудеса встречаются. Придумывать для каждого инструмента персональный костыль, как его импортировать, вроде как не хочется.
    • К предыдущему - иногда удобно в скрипты на JS импортировать что-то не на JS из отдельных файлов. В контексте моей работы - шейдеры на GLSL. Их нельзя просто так нативным import загрузить.
    • Часть зависимостей мы ставим с помощью npm. Это удобно. Но мы легко получаем папку node_modules на сотни мегабайт, при том, что в нашем проекте реально используется пара файлов оттуда. Загружать все это целиком на сервер - зачем? Ставить зависимости, а потом копировать нужные файлы откуда-то из глубин node_modules к себе в проект? Можно, но не то, чтобы удобно. Обновлять сложно будет, да и действий лишних что-то много.
    • Не всегда нам нужен полный функционал инструментов, которые мы используем. Часто в пример приводят lodash. Там много готовых функций на разные случаи жизни, но все используются редко. Было бы прям здорово в браузер загружать только то, что там на самом деле будет использоваться. А то, что не используется - не загружать.


    Как-то так. То есть нативные модули - это здорово. Но они далеки от совершенства. Не все проблемы решают. Поэтому сборщики все еще актуальны. И будут актуальны еще долгое время.

    Плюс webpack имеет возможность встроить в процесс сборки дополнительные процессы, которые долго делать руками. Код можно минифицировать. Уменьшит время загрузки страниц. Можно запустить w3c validator, stylelint, eslint, sonar и.т.д. - всякие проверялки, чтобы убедиться, что к пользователям улетит валидный код. Можно какие-то картинки сжать, сконвертировать в другие форматы. Можно typescript превратить в javascript, less, sass и.т.д. - в css. Много чего можно сделать. В целом сборщик сам по себе - это перпендикулярный ко всем этим процессам инструмент. И раньше люди использовали отдельный класс инструментов, чтобы запускать все это - таск раннеры. Grunt, gulp - вы скорее всего про них слышали. Можно писать npm-скрипты или даже по старинке делать makefile под сложную сборку. Но в webpack вроде как есть функционал плагинов, и можно эти процессы запускать и через него тоже. Вроде как он не для этого изначально придуман, но многие люди находят удобным иметь все в одном месте.
    Ответ написан
    Комментировать
  • Что произошло с шрифтом?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Без кода можно только гадать, что произошло в этом конкретном случае, но на ум сразу приходит свойство font-palette из CSS. Оно уже начинает поддерживаться в современных браузерах и некоторые энтузиасты его используют.

    Ответ написан
    1 комментарий
  • Почему текст в svg экспортируется как path?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    При экспортировании там есть настройки (три точки вызывают всплывающий список параметров), и там есть пункт "Outline Text". Он как раз отвечает за то, будут ли буквы как буквы, или они будут конвертироваться в path. По умолчанию они конвертируются.
    Ответ написан
    Комментировать
  • Как реализовать такое облако слов?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    В тегах вопроса значится Three.js, но в целом ради таких штук можно и не притягивать килотонны скриптов. Логики тут куда меньше, чем кажется на первый взгляд. Плюс можно и обычные HTML-элементы подвигать. Как пример:


    Тут немного отличается характер движений от примера на том сайте, но расположение надписей равномерно на сфере и суть поворотов плюс-минус такие же. И большой вопрос, что будет более производительным. Скорее всего на большом количестве надписей WebGL все же выйдет вперед, но пока их мало - сложно сказать, что лучше.
    Ответ написан
    Комментировать
  • По какому принципу работают плагины «линейки» в браузере?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    Плагин Dimensions замеряет расстояния через canvas. Реализация выглядит достаточно сложно...

    Глаза боятся, а руки делают. Реализация не такая уж и сложная. Если на пальцах, то основной скрипт в основе dimensions берет данные по цветам всех пикселей картинки, координаты, откуда начать, а дальше просто ходит влево, вправо, вверх и вниз по пикселям и смотрит, насколько они отличаются по цвету. Если сильно отличаются - значит у нас нашлась граница между элементами. Сколько пикселей насчитал до границы - столько и показывает нам в ответ. И дальше весь вопрос в том, откуда взять картинку и координаты. В случае с расширением для браузера - он делает скриншот страницы и берет текущие координаты мышки. Но можно этот скрипт и отдельно от расширения использовать, просто скармливая ему свои картинки и координаты - это универсальная штука.

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

    Если делать тупую линейку чисто в браузере чисто до прямоугольных границ элементов, то можно было бы брать getBoundingClientRect и координаты мыши и вычитать одно из другого. Это будет более простое решение более простой задачи. Но не той же самой.
    Ответ написан
    1 комментарий
  • Почему не заменяет перенос строки на пробел?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    sed имеет своеобразное представление о том, что такое "новая строка", можно попробовать опцию -z:

    speedtest --simple | sed '1d' | sed -z 's/\n/ /g'
    Ответ написан
    Комментировать
  • Как сделать, чтобы при переносе последнего слова, вместе с ним переносилась иконка, идущая за ним?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    не влезая в плагин, уже на загруженной странице

    const table = document.querySelector('table');
    const html = table.innerHTML;
    const modifiedHtml = html.replace(/>\s+<i/g, '>&nbsp;<i');
    
    table.innerHTML = modifiedHtml;
    Ответ написан
    9 комментариев
  • Как добавить 3D модель через Three JS?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    Хорошо бы, конечно, иметь полный рабочий пример, чтобы посмотреть. Но по коду кажется, что вы уже добавили загруженный объект на сцену вот тут:

    scene.add(gltf.scene);

    Этого должно быть достаточно. Так что то, что там дальше:

    const model = new THREE.Mesh( loader, material );
    scene.add(model);


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

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    курсор смещается внутри квадрата(нужно чтобы он оставался в центре)


    Если я правильно понял вопрос, то в JS:
    // Там, где в двух местах есть работа с --x и --y
    target.style.setProperty('--x', Math.floor(((e.clientX - rect.left) / rect.width * 100) * 100) / 100+'%');
    target.style.setProperty('--y', Math.floor(((e.clientY - rect.top) / rect.height * 100) * 100) / 100+'%');
    // нужна еще пара значений
    target.style.setProperty('--new-x', e.clientX - rect.left + 'px');
    target.style.setProperty('--new-y', e.clientY - rect.top + 'px');


    и в CSS:
    .image-zoom-block {
        /*
            left: var(--x);
            top: var(--y);
            transform: translateX(calc(var(--x) * -1)) translateY(calc(var(--y) * -1));
        */
        
        left: var(--new-x);
        top: var(--new-y);
        transform: translateX(-50%) translateY(-50%);
    }
    Ответ написан
  • Как сделать анимацию притягивания кнопки при движении мыши?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    в голове есть идея высчитывать ширину и высоту контейнера кнопки, а после отслеживать само движение мыши, но не знаю правильно это или нет

    Эффект определенно зависит от расположения мыши, расположения кнопки, и, возможно, от ее размеров. Так в чем проблема начать и посмотреть, что будет?

    Тут весь вопрос в том, чтобы подобрать нужную функцию от расстояния (в примере синус - самый простой вариант, хотя и не самый интересный). И определиться, будет ли эффект зависеть от расстояния до центра элемента (как в примере) или от расстояния до края кнопки. От этих выборов будет зависеть конечный эффект. Там долго можно играться с функцией и параметрами, но направление должно быть понятно.
    Ответ написан
  • Почему YouTube мешает Swiper?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Можно ли как то совместить эти события, чтобы и слайды листать, и кнопки в плеере нажимать?

    В том виде, в котором оно есть сейчас - нет. Проблема существует с 2013 года как минимум и будет решена примерно никогда, потому что обе стороны конфликта говорят, что проблема не на их стороне. Но можно вместо интерфейса от youtube прикрутить свой. То есть плеер оставить, но управление сделать свое, которое будет как-то сочетаться с имеющимся интерфейсом. Такой вот компромисс. Концептуально это будет выглядеть так, что мы убираем стандартный iframe, отключаем для плеера pointer-events:
    <div class='swiper' id='my-slider'>
        <div class='swiper-wrapper'>
            <div class='swiper-slide'>Slide 1</div>
            <div class='swiper-slide' id='youtube-slide'>
                <div id='player'></div>
            </div>
            <div class='swiper-slide'>Slide 3</div>
            <div class='swiper-slide'>Slide 4</div>
        </div>
    </div>
    <style>
    #player {
        pointer-events: none;
    }
    </style>

    И переходим к API на js, чтобы сформировать свой плеер, который мы будем контролировать:
    const youtubeScriptTag = document.createElement('script');
    youtubeScriptTag.src = 'https://www.youtube.com/iframe_api';
    document.body.appendChild(youtubeScriptTag);
    
    window.onYouTubeIframeAPIReady = () => {
        const player = new YT.Player('player', {
            videoId: 'orbr-C3gYKk',
            playerVars: {
                controls: 0
            },
            events: {
                onReady: (event) => {
                    const youtubeSlide = document.getElementById('youtube-slide');
                    let isVideoPlaying = false;
    
                    youtubeSlide.addEventListener('click', () => {
                        if (isVideoPlaying) {
                            event.target.stopVideo();
                        } else {
                            event.target.playVideo();
                        }
    
                        isVideoPlaying = !isVideoPlaying;
                    });
                }
            }
        });
    }
    
    const swiper = new Swiper('#my-slider', {});

    В playerVars можно передать всякие параметры и немного настроить внешний вид плеера (убрать лишнее). И можно все подвесить на события свайпера, чтобы запускать или останавливать видео при переходе на нужный слайд, ну или что там нужно по дизайну.

    P.S.: На CodePen метод playVideo может не работать в Chrome-подобных браузерах из-за особенностей работы песочницы, но на обычной странице все должно быть ок.
    Ответ написан
    2 комментария