• Шрифты по разному ведут себя в консоли и на реальном устройстве, почему?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Прежде, чем ломать голову над тем, проблема это в эмуляторе в Chrome или нет, стоит проверить, а воспроизводится ли проблема в других браузерах или даже в самом Chrome, если само его окно поменять в размерах. И да, воспроизводится. Текст обрезается то сверху, то снизу. Это не проблема эмулятора. Нужно смотреть логику в коде, кто смещает текст.

    А в коде на некоторых разрешениях экрана вы тексту добавляете padding сверху. А на некоторых - не добавляете. Вот он и ездит вверх-вниз внутри контейнера с overflow: hidden и обрезается. А звездочкам с абсолютным позиционированием на padding все равно, они не ездят. Это то, что нужно исправить.

    По поводу эмулятора в Chrome: он всегда имел сложности с единицами vh/vw. С годами его поведение менялось, но в целом все его тараканы в голове всегда можно было прибить с помощью мета тега для вьюпорта. Вы его используете только чтобы задать изначальное масштабирование, но там еще есть возможности для ограничения - minimum-scale, maximum-scale и грубое user-scalable. С ними нужно быть осторожнее в продакшене, чтобы не ломать людям доступность, но в каких-то замороченых случаях отладки можно применить, чтобы забрать у эмулятора возможность что-то масштабировать и странно трактовать единицы измерения. Но, еще раз, практика эта странная, ваше верстка должна работать без таких ограничений.
    Ответ написан
    Комментировать
  • Почему на windows возникает ошибка, а на linux работает?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    В документации moment.js говорится, что для парсинга строки (когда мы делаем moment(String)) эта самая строка должна соответствовать одному из форматов ISO 8601. В случае если строка стандарту не соответствует - работа во всех браузерах не гарантируется. Там есть специальное предупреждение по этому поводу и примеры строк, которые будут соответствовать. Вероятнее всего вы столкнулись именно с этим - ваши даты не парсятся в определенных браузерах.
    Ответ написан
    Комментировать
  • Как стилизовать список?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    нужно, чтобы строки при переносе начинались с отступом

    В свойстве list-style не нужен inside. Форматирование "с отступом" - это форматирование, которое применяется по умолчанию. Просто не меняйте то, что и так работает.
    Ответ написан
    Комментировать
  • Как сделать, чтобы высота iframe была равна соотношению 16:9?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    пропорции 16:9

    Ну так:
    .whois-video {
        aspect-ratio: 16 / 9;
    }

    И да, это уже можно делать. Пора уже забыть эти хаки с padding.
    Ответ написан
    Комментировать
  • Как сделать эффект движения за курсором?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    На этом сайте используется какая-то из версий WebGL Fluid Simulation.
    Ответ написан
    1 комментарий
  • Как реализовать такую таблицу с затемнением?

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



    Код с повторениями почти одного и того же, вероятно его можно сократить в какой-нибудь хитрый миксин, но конечная идея примерно такая.

    P.S.: И тут, по хорошему, стоит уточнить у дизайнера, как он видит длину затемнения в процентах от длины ячейки, особенно когда они сильно отличаются по пропорциям. Здесь градиенты от края до края, но, возможно, что в вашем случае нужно делать градиент не от 0% до 100%, а от 0% до какого-то другого значения, возможно зависящего от размера шрифта, а дальше уже заканчивать одним цветом.
    Ответ написан
    1 комментарий
  • Как вивести на экран камеру?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    var video = document.querySelector('video');

    У вас в body нет ни одного тега video, соответственно с помощью querySelector не находится ничего, переменная video равна null, и дальше все ломается. Добавьте тег video и все заработает.
    Ответ написан
    1 комментарий
  • Почему свойство transform-origin не работает для rotate() внутри svg-изображения?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    В SVG условный transform-origin всегда находится в координатах (0,0) координатной плоскости. Его нельзя изменить. Если мы пытаемся задать его в CSS, то логика работы трансформаций в CSS входит в явный конфликт с логикой работы трансформаций в SVG, и там каждый браузер интерпретирует происходящее на свой вкус (тут есть старая, но все еще годная статья по теме). В последние годы, со всеми этими сменами движков у браузеров, вкусы начинают двигаться в одну сторону, но бардак все еще присутствует. Но всегда можно сделать старую добрую матрешку:

    <!-- 90 = x + width, 168 = y + height - правый нижний угол книги -->
    <g transform="translate(90, 168.5)">
        <g id="book">
            <rect class="fil0 str0" x="60" y="18.5" width="30" height="150" transform="translate(-90, -168.5)" />
        </g>
    </g>


    Убираем transform-origin из CSS, чтобы не было конфликтов, смещаем нужный центр трансформации в координаты (0, 0), применяем там трансформацию, смещаем обратно, где он должен быть.
    Ответ написан
    3 комментария
  • Как работать с gulp cheerio?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    gulp cheerio как то странно работает, он портит некоторые svg иконки, их не видно, у них нет цвета и fill(заливка) на них не работает, может вообще его не использовать?

    Вы несколько раз используете метод removeAttr, чтобы удалить атрибуты fill у элементов (если у них черная заливка, заданная в формате #000 или #000000), а также все атрибуты stroke и style из кода. А теперь вы задаете вопрос, а почему у вас пропадают цвета? Очевидно они пропадают потому, что вы сами написали код, который их удаляет.
    Ответ написан
    Комментировать
  • Что за проблемы с наложением, бордерами в хроме в последнее время?

    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 комментарий