• Почему заливка картинки больше самой заливки?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    как решить?

    .img img {
        display: block;
    }

    Всё это нужно для затемнения фотографии

    Можно рассмотреть еще вариант без отдельного элемента с фоном:
    img {
        filter: brightness(0.6);
    }
    Ответ написан
    Комментировать
  • Допустимо ли использование midjourney, шедеврум и тп в комерческих целях?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    Шедеврум

    Условия использования сервиса «Шедеврум»:

    3.3. Пользователь вправе использовать Изображения, Видео и Тексты, созданные им или другими Пользователями с использованием Сервиса, в личных некоммерческих целях с соблюдением пунктов 2.5. и 3.6. настоящего Соглашения и действующего законодательства. Любое коммерческое использование Изображений, Видео и/или Текстов возможно только при условии предварительного согласования с Яндексом.

    Вы можете обратиться за получением согласия на коммерческое использование Изображений, Видео и/или Текстов через форму обратной связи.

    ...

    В таких вопросах не нужно слушать никого в интернете, нужно идти и читать условия использования. При необходимости связываться с компанией или своим юристом. Конечно найдутся персонажи, которые скажут "да что такого", что вами лично никто не заинтересуется, если вы миллионы на этом не зарабатываете, но потом эти же персонажи пишут жалобные статьи, как их нагрели за коммерческое использование изображений, на которое у них не было прав. У Midjourney соглашение более гибкое, но тоже с оговорками. И тоже стоит самому почитать.
    Ответ написан
    1 комментарий
  • Как сделать плавную анимацию при смене значений через js?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Вероятно вам нужен обычный transition, он будет срабатывать каждый раз, когда значения будут меняться:

    .items {
        .single-chart {
            .circular-chart {
                .circle {
                    /* animation: progress 1s ease-out forwards; */
                    transition: stroke-dasharray 1s ease-out;
                }
            }
        }
    }
    Ответ написан
    1 комментарий
  • Как сделать чтобы у меня 3д анимация вращения не плавала в дополнительной плоскости?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    У нас три координаты - XYZ. Для CSS все элементы на странице - плоские, у них нет толщины, и их размеры по оси Z нулевые. Поэтому CSS за нас не угадает, куда должен смещаться transform-origin по оси Z для кирпичика, который существует исключительно в нашем воображении. Вы смещаете грани кирпичика в отрицательные значения по оси Z, но точка transform-origin, через которую проходит ось вращения, остается в плоскости Z = 0.

    Получается, что вам нужно как-то вручную совместить ось вращения и центр кирпичика. Тут два пути - либо сместить точку transform-origin на пол кирпичика вглубь по Z:

    .cube {
        transform-origin: 50% 50% -25px;
    }

    Так ось вращения будет проходить через его текущий центр. Либо сместить грани кирпичика, чтобы он изначально собирался не "весь вглубь экрана", а "половина вглубь, половина к нам". Его центр сразу будет в плоскости Z = 0, где по умолчанию находится transform origin, и не нужно будет ничего дополнительно двигать.
    Ответ написан
    1 комментарий
  • Как сделать так, чтобы prettier не переносил каждый метод на новую строчку в JS?

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

    Можно игнорировать какие-то конкретные штуки с помощью комментария // prettier-ignore. Но нужно ли?
    Ответ написан
    1 комментарий
  • Как максимально просто создать фигуру как на изображении для последующей анимации?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Вариант с градиентами - сложный для анимирования. Рисование линий со stroke-dasharray - это стандартный выбор. Но dash array может быть длинным, им можно описать самые разные последовательности линий и пробелов, так что если вам не нужны разные цвета, то можно сделать одну линию:

    Ответ написан
    5 комментариев
  • Как через css сделать такие блики на bk сайта?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Формально можно взять фильтр blur с большим радиусом и размыть абсолютно расположенные на фоне элементы. В SVG есть аналогичный фильтр. Но лучше так не делать. Для таких размытий используется вычислительно сложный алгоритм и можно существенно увеличить нагрузку на устройства пользователей на ровном месте. Это просто сложно рендерить в реальном времени.

    Производительнее будет это размытое нечто картинкой вставить. Тоже не идеально, грузиться будет дольше, но выбирая между тормозами всего или слегка более долгой загрузкой ни на что не влияющей кляксы на фоне - в 99% случаев стоит выбрать второе.

    Есть, конечно, еще более развитый вариант - взять canvas, отрендерить эту штуку на нем один раз в фоновом режиме, а потом использовать результат как картинку. Так оно не будет требовать загрузки картинки по сети, и мы не будем грузить устройства пользователей постоянно. Но это уже другой вопрос, про другие инструменты.

    P.S.: Добавлю еще такой момент, что при использовании картинки может возникнуть такая мысль, что в CSS есть еще градиенты - и это ведь тоже как картинки, может быть их использовать? Но собрать такое из градиентов гораздо сложнее, чем кажется. Сложение полупрозрачных градиентов - это не тот же алгоритм, что размытие. При взаимном наложении клякс друг на друга результат будет отличаться. Чтобы иметь такое же красивое размытие - придется иметь много градиентов, что сведет на нет саму идею снижения нагрузки на железо через них.
    Ответ написан
    Комментировать
  • Как сгенерировать простую анимацию в виде списка WORD/DWORD?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    Я максимально далек от программирования контроллеров, но поделюсь идеей, что у нас в javascript можно делать вот так (вероятно и в других языках, более близких к вашим задачам, есть похожая возможность):

    const frames = [
        [
            0b0000001100000000,
            0b0000001100100000,
            0b0001111111100000,
            0b0001001100000000,
            0b0000010010000000,
            0b0000100001000000,
        ],
        [
            0b0000001100000000,
            0b0001001100000000,
            0b0001111111100000,
            0b0000001100100000,
            0b0000010010000000,
            0b0000100001000000,
        ],
    ];
    
    console.log(frames);
    // -->
    // [
    //     [ 768, 800, 8160, 4864, 1152, 2112 ],
    //     [ 768, 4864, 8160, 800, 1152, 2112 ]
    // ]

    Мне кажется, что имея моноширинный шрифт натыкать единичек в виде каких-нибудь картинок вполне можно. Запустить этот скрипт можно в любом интерпретаторе js. Если нужно действительно что-то простое, на один раз, то как вариант. А можно и детям показать, как числа выглядят по-разному.
    Ответ написан
  • Как сделать два canvas для одной сцены в three.js?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    Точно такая же сцена требуется в другом месте, и не хотелось бы дублировать код и создавать ту же сцену для другого канвас

    Сцену дублировать не обязательно. WebGLRenderer не умеет рендерить в несколько мест одновременно, но можно иметь одну сцену и много рендереров, каждый из которых будет рендерить ее в свой канвас. Это работает.

    Если посмотреть с другой стороны, то возможно, что вам не нужны два канваса. Это может звучать странно, но тем не менее. Пользователь же все равно видит только один экран информации. Можно иметь один канвас на весь экран, и в нем рендерить сцены в какие-то его участки. Там есть такой функционал у рендерера, называется "ножницы" (scissor). Его можно использовать как раз для таких задач. Есть хороший пример в документации.

    Но если делать именно 100% дублирование, то оба этих варианта будут не самыми толковыми с точки зрения производительности. В лоб скопировать уже готовое содержимое канваса в другой через drawImage должно быть проще, чем рендерить всю сцену еще раз. Поэтому решение, которое пришло вам в голову - очень даже ничего в текущем контексте. Хотя и выглядит топорно.
    Ответ написан
    1 комментарий
  • Ошибка TypeError: dest.on is not a function?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    Ошибка вида TypeError: dest.on is not a function говорит о том, что что-то в вашем пайплайне не является потоком. Она отправляет нас сюда:

    src('src/scss/style.scss')
        .pipe(autoprefixer({overrideBrowserslist: ['last 10 version']}))
        .pipe(concat('style.min.css'))
        .pipe(scss({outputStyle: 'compressed'}))
        .pipe(dest('src/css'))
        .pipe(browserSync.stream())


    Нужно каждый pipe тут проверить. Первый сразу выглядит подозрительно. Согласно официальной документации autoprefixer в gulp интегрируется по-другому. Вероятно на нем все и ломается.
    Ответ написан
    Комментировать
  • Как увеличить производительность 2д- игр?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    если я перейду на визуализатор pixi то будет ли существенное повышение производительности?

    Matter использует 2D канвас (если мы говорим про их стандартный рендерер). Pixi - WebGL. Ваш вопрос получается не про Pixi, как библиотеку, а про разницу технологий.

    Когда-то было такое время, что 2D-канвас рендерился полностью на CPU, и тогда разница между ним и WebGL была в первую очередь обусловлена этим фактом. WebGL - это более низкоуровневый интерфейс с доступом к видеокарте. Много ядер, процессы хорошо распараллеливаются, при наличии прямых рук и понимания основ компьютерной графики все рендерится быстрее. Но в наше время и 2D-канвасы ускоряются видеокартой. Если очень грубо говорить, то сейчас 2D канвас - это тот же GL-канвас, но с более высокоуровневой обвязкой сверху. Чисто для удобства. Можно сказать, что разница в алгоритмах самого рендеринга с годами сводится к нулю, остается лишь разница в обвязке. Изначальная высокоуровневая структура вокруг 2D-канваса с кучей условно ненужного в конкретных случаях функционала не оптимизируются так эффективно, как бы нам хотелось. Она не умеет предсказывать наши намерения. Из-за этого переход от 2D к WebGL может дать прирост производительности. Но не столько за счет самого рендеринга, сколько за счет более умного переиспользования ресурсов и избавления от всех ненужных в конкретных случаях операций. Так что в целом идея взять двумерный рендерер на WebGL и делать в нем только то, что требуется, и ничего лишнего - все еще хорошая. Плюс у него будет сразу задел на использование своих кастомных шейдеров, что открывает целый мир визуальных эффектов, неподвластных 2D-канвасу.

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