Задать вопрос
  • Обработка тайлов на SVG. Видны прорези между ними, что делать?

    sfi0zy
    @sfi0zy Куратор тега HTML
    Creative frontend developer
    Это похоже на известную проблему с рендерингом разных штук в браузерах. Тут два связанных момента - с одной стороны есть вопрос подгонки размеров элементов под пиксельную сетку на экране, и потенциальные ошибки с округлениями значений и "дырками" или "нахлестами" в 1px между сущностями на экране, а с другой - собственно сглаживание, когда у нас появляются промежуточные цвета, смягчающие переходы от одних к другим. Иногда, как в таких ситуациях, мы можем воспринимать их как неуместные.

    С размерами мы еще можем попытаться что-то сделать. Например распространенный костыль состоит в том, чтобы по возможности иметь размеры элементов в целом количестве пикселей. Т.е. не давать браузеру округлять на свой вкус. А вот сглаживание мы не можем выключить просто так. Вы нашли атрибут shape-rendering, но если внимательно почитать в стандарте, что он предполагает, то там будут исключительно рекомендательные высказывания:

    the user agent might turn off anti-aliasing


    или

    might adjust line positions and line widths to align edges with device pixels


    Но "might" не означает "must". На практике сглаживание или не отключается полностью, или отключается, но границы по пикселям смещаются так, что становится еще хуже, чем было, или еще какая фигня происходит. В разных браузерах все по-разному и поведение немного меняется со временем, так что старые костыли могут переставать работать. В CSS есть свойства, связанные со словом rendering, и они такие же мутные в своих формулировках.

    На практике это означает, что единственный вариант взять контроль над рендерингом в свои руки - это рисовать все на канвасе. И хотя вы говорите, что "канвас не рассматриваем", именно он и будет надежным вариантом решить такого рода проблемы раз и навсегда.
    Ответ написан
    2 комментария
  • Зачем нужен блок инструкций без управляющей инструкции?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    В изначальных исходниках там TypeScript. Вы смотрите уже скомпилированный код. В исходниках местами все обернуто в разные условия, завязанные на__DEV__:
    export function setExtraStackFrame(stack: null | string): void {
      if (__DEV__) {
        currentExtraStackFrame = stack;
      }
    }

    Когда происходила сборка кода, который вы смотрите, вероятно __DEV__ был true, условие было опущено, т.к. оно всегда выполняется, а скобки остались как артефакт. Скорее всего транспилятор TS не проверяет весь контекст, и чтобы ничего не сломать случайно, оставляет скобки на своих местах.
    Ответ написан
    2 комментария
  • Как сделать фиксированную высоту сайта?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    В таких вопросах хорошо показывать код, а не скриншоты, но в общем случае если нам нужно вписать что-то очень большое на фон и сделать так, чтобы оно вылезало за края экрана, но не вызывало скролла нигде, то этой большой штуке делается контейнер с overflow: hidden. Внутри контейнера она может вылезать куда угодно, это уже не будет влиять на размер страницы в целом.
    Ответ написан
    3 комментария
  • Насколько опасно использование конструктора Function?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    И конструктор Function, и eval, в теории позволяют без каких-либо проверок выполнить код, который мы не контролируем. Мы не можем проверить его на этапе разработки и не можем быть уверенными, что у пользователя будет выполняться именно он. Он прилетает откуда-то. И весь вопрос в доверии к источнику. Если кто-то (пользователи, контент-редакторы, или кто там еще может быть) может влиять на то, что прилетит - возникает простор для потенциальных атак на пользователей системы. Кто-то что-то куда-то написал, скопипастил, а потом это что-то у пользователя выполнилось. И кто знает, что оно с данными пользователя сделает. Тут каждый оценивает риски сам, но в общем случае выполнять непроверенный код действительно не рекомендуется.

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

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Хорошего нативного и кроссбраузерного решения у нас пока нет. Но у path в SVG есть методы getTotalLength и getPointAtLength, а из них можно сообразить себе утилиту для расположения кружков вдоль кривой в удобных единицах измерения. Это не так здорово, как на CSS, но тем не менее:

    function putCircleOnPath(path, circle, percent) {
        const length = path.getTotalLength();
        const point = path.getPointAtLength(length * percent / 100);
    
        circle.setAttribute('cx', point.x);
        circle.setAttribute('cy', point.y);
    }


    Получится что-то такое:

    Ответ написан
    2 комментария
  • Какие могут быть подводные камни при верстке в REM c шрифтом HTML в VW?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Классическая реализация этого подхода предполагает, что есть CSS шлюз, ограничивающий минимальный/максимальный размер шрифта для минимального/максимального размера экрана, и логика дизайна явно завязана на размер шрифта. Как в мире, где люди печатают разные штуки на бумаге. Плюс альтернативные единицы измерения - vw, vmax, проценты - если нужно. Это помогает сохранить в верстке логику дизайна в явном виде. Используя искусственную логику 1rem = 10px, и rem не в значении "базовый размер шрифта", а просто как костыль для адаптивности, вы упрощаете изначальные подсчеты, но в верстке получается гора рандомных дробных значений, которые не пойми что обозначают. Тут нужно либо подгонять все под 10px сетку, что не всегда уместно, либо по мере усложнения интерфейса это все превратится в такую кашу, что врагу не пожелаешь. Собственно это возвращает нас к изначальной проблеме верстки в пикселях. Куча магических значений и никакой логики в коде. Это главный недостаток вашего способа приготовления rem.

    Вторая проблема, более общая - округление значений. При изменении размера экрана будут появляться дробные размеры всего. Они будут округляться до целого количества пикселей. При этом у нас есть много ситуаций, когда разные браузеры будут округлять по-разному, или просто не туда, куда мы ожидаем. Появляются разные артефакты. В модных сайтах, где в дизайне много негативного пространства, мы можем этого не заметить, но в тесных интерфейсах кроваво-энтерпрайзных приложений это быстро станет проблемой. Там пиксели = надежность и предсказуемость.
    Ответ написан
    2 комментария
  • Возможно ли с SVG сгенерировать JSON для lottie-react?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    Во-первых из вопроса нужно убрать реакт. Lottie - это самостоятельный инструмент, который к реакту никакого отношения не имеет. Его прародитель, Bodymovin, был расширением для After Effects, позволяющим экспортировать анимации оттуда. Сейчас это все развилось в целую экосистему для дизайнеров, и там чего только нет. Плагин для AE - это теперь малая часть экосистемы. А фронтендерский пакет lottie-react - это просто обертка над местным плеером, не более того.

    Вы можете по-старинке взять After Effects, импортировать SVG туда, там все анимировать, и потом оттуда экспортировать с помощью плагина Lottie, и загрузить к нам во фронтенд. Альтернативно вы можете взять их собственный редактор (на сайте Lottie есть все, что нужно знать про него). Что там, что там - будет нужно погрузиться в локальную специфику работы с этими программами, на какие кнопочки тыкать. По идее это зона ответственности моушн-дизайнера, а не программиста-фронтендера. Если у вас в проекте все завязано на Lottie - где-то поблизости должен быть и дизайнер, который работает или с AE, или с их собственным редактором. Если вы не умеете - он умеет. Тут не нужно изобретать новые инструменты. Все уже есть. Работайте по стандартной схеме.

    Но если смотреть на вопрос в вакууме, со стороны фронтенда, то в текущей формулировке все звучит так, что вы хотите взять что-то, что уже находится в мире фронтенда, вынести в мир Lottie, а потом внести обратно. Это выглядит как усложнение ради усложнения. Иногда такой подход можно объяснить, но не всегда. Учитывая простоту вашей анимации - возможно имеет смысл рассмотреть что-то из стандартных фронтендерских инструментов? У нас есть по крайней мере три способа анимировать SVG нативными средствами. Возможно, что в конкретном случае проще будет не ввязываться в зависимость от Lottie.
    Ответ написан
    Комментировать
  • Как сделать такой эффект?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    Там весь сайт - это по сути видео-презентация, где на каждом экране пользователю показывается новое видео. Фронтендерские навыки тут особо и не нужны.

    Выбор видео в данном случае решает два вопроса - экономию бюджета и обеспечение качества:

    • Все это может делать один дизайнер (+ опционально 3D-художник) в специализированных программах. Это быстрее, чем руками кодировать (быстро = дешево). Дальше мы просто вставляем результат в страницу. Соответственно не нужен фронтендер, понимающий в компьютерной графике (таких долго и дорого искать), не нужно воссоздавать визуально сложные и утвержденные заказчиком эффекты на фронтендерских технологиях (это просто боль, плюс сроки, и, опять же лишний бюджет).
    • Вопросы производительности отсутствуют. В теории можно взять WebGL и рендерить все на устройстве пользователя. Но на самом деле рассчитывать хитрое освещение в реальном времени всегда проблематично - там куда ни плюнь будут вычислительно-сложные алгоритмы. Что делать с ноутбуками со встроенной графикой или с телефонами? Это вечный вопрос. Часто такие проекты горят именно на том, что на старте разработчики не осознают, насколько там на самом деле требовательные алгоритмы, и к дедлайну все безнадежно тормозит. Приходится сильно упрощать картинку, жертвовать качеством изображения в угоду производительности. Чтобы в это не вляпаться, презентации товаров рендерят заранее (можно несколько секунд презентации хоть всю ночь рендерить), сохраняют или в видео, или в набор картинок, и уже их показывают конечному пользователю. Это стандартная практика.
    Ответ написан
    Комментировать
  • Микроразметка не видна - как исправить?

    sfi0zy
    @sfi0zy Куратор тега HTML
    Creative frontend developer
    Такие вещи всегда лучше для начала проверять с помощью официального Schema Markup Validator + Rich Results Test от Google. Первый проверит, что все ок с синтаксисом (вне зависимости от поисковых систем), а второй - что конкретно Google может посчитать странным. В данном случае синтаксически все хорошо, но Google докапывается до отсутствующих position и говорит, что без них не будет эти данные использовать. В примере для itemListElement (во вкладке microdata) можно посмотреть, куда эти мета теги с position добавить. Вероятно вам стоит все ваши страницы прогнать через эти сервисы и посмотреть, что там еще не так.
    Ответ написан
    9 комментариев
  • Как сделать подобную анимацию?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    Никакой Three.js тут не нужен. Ну то есть, конечно, никто не мешает сделать все это на WebGL и прикрутить здоровенный фреймворк сверху, но все же это будет слегка избыточным решением в большинстве случаев. Такое можно аргументировать только если весь сайт изначально так и делается на WebGL и это просто "один из" эффектов, которые туда нужно интегрировать.

    В 99% остальных случаев подобные штуки делаются одной svg-картинкой, одним path, который рисуется в зависимости от положения мышки и размеров контейнера. Немного школьной геометрии, ограничение диапазона возможных смещений всего этого - и дальше можно до посинения играть с алгоритмом расчета смещения, до тех пор, пока реакция на мышку не начнет нравится. Там уже нет универсального рецепта, все от дизайна зависит. Можно линейно привязать к положению мыши. Это обычно выглядит скучно. Можно использовать какую-то функцию от расстояния до центра, чтобы сделать движения менее равномерными. В каких-то случаях делают полноценный эффект инерции, как верно подмечено в соседнем ответе. Там получаются более естественные движения (обычно все это является развитием гравитационных моделей). Есть совсем замороченный подход, когда используется моделирование системы пружин (для общего развития можно загуглить силовые алгоритмы визуализации графов). Там можно получить целый ряд занятных эффектов, которые часто оказываются в тему как раз в таких фонах, где какие-то штуки связаны между собой прямыми линиями. Ну и можно просто вдохновиться какими-то физическими явлениями и сделать что-то "по мотивам".

    Ответ написан
    22 комментария
  • Почему в normalize.css выдает две ошибки?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Вероятно вы используете либо встроенный в VSCode линтер для CSS, либо stylelint. С настройками по умолчанию они оба сообщают о наличии префиксов у CSS-свойств. В случае со встроенным линтером - у него есть настройка css.lint.vendorPrefix, смысл которой в том, что к свойству с префиксом нужно добавлять свойство без префикса, и если его нет, то это выглядит странно. В случае со stylelint - есть правило property-no-vendor-prefix. Там логика другая - в нормально выстроенном процессе сборки всю работу с префиксами на себя берет autoprefixer, соответственно само появление префиксов в коде выглядит как что-то лишнее. Если они добавляются автоматически, то писать их самому в обычных ситуациях вроде как не нужно.

    В normalize.css эти префиксы нужны, именно в том виде, в котором они там есть, чтобы подровнять стили между разными браузерами. В этом его задача. Так что предупреждения от обоих линтеров в данном случае не имеют практического смысла. Этот файл такой, какой есть, и мы не будем его трогать. Можно добавить этот файл в исключения, чтобы замечания по нему не мозолили глаза.
    Ответ написан
    Комментировать
  • Как сделать глобальный node_modules или как не дублировать одни и те же пакеты между проектов?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    Вероятно вам нужно смотреть на что-то вроде pnpm. Этот инструмент как раз создает единое хранилище пакетов и потом ссылается на файлы в нем вместо скачивания всего по 100 раз.
    Ответ написан
    Комментировать
  • Можно ли опустить первые 0% в linear-gradient?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Да, можно пропустить первое значение в 0%. Если почитать стандарт, то там прямым текстом написано, что эти значения, где расположить цвета на градиенте - не обязательные. Можно вообще все пропустить. Если они пропущены, то расположение цветов в градиенте восстанавливается по четкому алгоритму.

    В целом ответы на подобные вопросы о тонкостях интерпретации CSS имеет смысл искать в стандартах.
    Ответ написан
    2 комментария
  • Как анимировать такой фон?

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

    1. Берем плоскость
    2. На плоскость накладываем какую-нибудь красивую текстуру
    3. Добавляем вершин побольше
    4. В вершинном шейдере делаем какой-то генератор шума и используем значения из него чтобы двигать вершины туда-сюда в направлении, перпендикулярном плоскости
    5. Опционально там же рассчитываем нормали для освещения
    6. Играемся с коэффициентами до посинения, пока результат не начнет нравиться


    Ответ написан
    Комментировать
  • Почему canvas на телефоне работает по другому?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    В codepen я нашел интересный проект...

    Это WebGL Fluid Simulation. И оригинальная ее версия на телефонах работает хорошо. Вы нашли какую-то из вариаций на тему этой штуки. Думаю для вас будет проще взять оригинал, а не отлаживать тот пример, который вы нашли.
    Ответ написан
    1 комментарий
  • Почему bottom:0 не работает?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Использование position: relative совместно со свойствами top, right, bottom или left смещает элемент относительно его естественного расположения на странице. Поэтому все работает так, как и должно. Ваш main естественным образом расположен в верхней части родителя и смещен на 0px. Ну то есть никуда не смещен.

    Вероятно вы получите нужное вам поведение если будете использовать position: absolute.
    Ответ написан
    Комментировать
  • Как добавить класс если в блоке что то есть?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    через css хочу скрыть его, когда пуст

    В такой формулировке можно обойтись без дополнительных классов:
    .wishlist_products_counter_number:empty {
        display: none;
    }
    Ответ написан
    1 комментарий
  • Как быть с анимацией в Firefox?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Это известный баг у масок в Firefox. Проявляется и с mask, и с clip-path. Суть проблемы в том, что маска применяется уже после трансформации, после поворота, и при расчете ее границ возникают сложности с округлениями до целого количества пикселей. Браузер не знает, в какую сторону лучше округлять. В результате для каких-то пикселей на границах маска применяется не так, как мы ожидаем, ее граница как бы смещается на 1px. Самый простой и безболезненный способ избавиться от проблемы в вашем конкретном случае - избавиться от масок. Нет маски - нет проблемы. Исходя из вашей задачи ничто не мешает использовать svg-иконки сразу, как есть, в виде обычных картинок, без нагораживания всей этой истории с белым квадратом, который потом обрезается.
    Ответ написан
    4 комментария
  • Шрифты по разному ведут себя в консоли и на реальном устройстве, почему?

    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. В случае если строка стандарту не соответствует - работа во всех браузерах не гарантируется. Там есть специальное предупреждение по этому поводу и примеры строк, которые будут соответствовать. Вероятнее всего вы столкнулись именно с этим - ваши даты не парсятся в определенных браузерах.
    Ответ написан
    Комментировать