Задать вопрос
  • Влияние css3 на скорость сайта и производительность ПК?

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

    Фильтры есть разные. Здесь CSS, SVG, что-то свое на WebGL - не важно, важен алгоритм. Если фильтр просто для каждого пикселя меняет цвет например, то он даст минимальную дополнительную нагрузку - там будет линейная зависимость количества операций от количества пикселей. А вот blur или тени уже требуют для каждого пикселя что-то считать в зависимости от соседних пикселей. Чем более сильный blur, тем больше вычислений требуется. У ноутбуков со встроенной графикой или телефонов может просто не хватать возможностей по железу и все будет тормозить. Ну и не стоит забывать, что загруженная на 99% видеокарта заставит тормозить все, даже если центральный процессор не загружен вообще.
    Ответ написан
    1 комментарий
  • Пишут ли в компаниях коммиты в git на русском?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    принято ли в срезе разработки веб приложений СНГ писать коммиты на русском?

    У нас как только не пишут. Бывает, что мешают по несколько языков в одном проекте, в том числе и в компаниях, которые себя позиционируют как очень модные. Все зависит от конкретных людей в конкретном месте.

    Но чем более подкованные специалисты в команде, тем больше вероятность, что они между собой договорятся все унифицировать и писать коммиты по конкретной схеме (это больше не про язык в вакууме, а про последовательность в проекте, чтобы было проще ориентироваться). Очень вероятно, что при этом выберут английский, т.к. скорее всего "русские" сообщения коммитов будут состоять из:

    1. Англицизмов, которые еще и не имеют однозначной транслитерации в кириллицу, что ломает поиск по коммитам.
    2. Названий классов, файлов, или еще каких-то сущностей из мира кода, которые и так уже переведены и есть в исходниках проекта на английском.
    3. Набора базовых глаголов, которые ставят в начале предложений, вроде "добавил", "исправил", "удалил".


    Тут как бы получается выбор между очень ограниченным техническим английским и рунглишем, а не между чистым литературным английским и чистым и грамотным русским языком.
    Ответ написан
    3 комментария
  • Как правильно запустить gulp?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    2. Откатиться до более раний версии node js 10 или 11 ( не понимаю как сделать )

    Есть утилиты, которые ставят много версий ноды и позволяют между ними легко переключаться. Мне уже не первый год нравится n (работает и в linux, и в macOS). Можно загуглить и другие варианты.
    Ответ написан
    2 комментария
  • Не работает деление в LESS?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Если определить @columns и убрать собачку от 15px, то все работает:

    @columns: 5;
    
    .grid(@columns, @i: 1) when (@i <= @columns) {
        .col-@{i} {
            max-width: percentage(@i / @columns);
            padding: 0 15px;
            flex: 1;
        }
    
        .grid(@columns, @i + 1);
    }
    
    .grid(@columns);
    Ответ написан
  • Как сделать такую анимацию на сайте?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Набор инструментов - это всегда дискуссии из разряда "на вкус и цвет фломастеры разные". Я бы в первую очередь смотрел на:



    Но тут важно понимать - аналогичных инструментов у нас полно, и в конечном счете не так важно, что вы возьмете. Многие вещи (почти все на самом деле) можно вообще своими руками с нуля делать - будут получаться узконаправленные, но очень маленькие и шустрые решения. Может показаться странным, но реально сложные задачи, требующие сложных инструментов и много-много кода, в этой области - редкость, т.к. все более-менее сложное в компьютерной графике требует серьезных вычислительных мощностей и не работает нормально на телефонах и ноутбуках со встроенной графикой. Светлое будущее наступило только у веб-евангелистов, а у нас на рынке пока еще серое настоящее. Иногда бывают алгоритмически сложные концепты, где нужно немного шарить в физике и математике, но там и готовых библиотек не будет. А в рамках распространенных задач - гораздо важнее идеи, дизайны, а не инструменты.
    Ответ написан
    1 комментарий
  • Как слепить такой блок на css?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Ответ написан
    Комментировать
  • Как сделать такого рода эффект?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    не могу найти в поиске

    SVG-маски, маски с помощью clip-path в CSS, маски на канвасе, маски в шейдерах, и.т.д. В общем гуглите все, что связано со словом "маска". Вариант с шейдерами самый производительный, с SVG - самый простой.

    Пример с SVG:


    Пример с шейдерами (не совсем такой, но для передачи идеи пойдет):
    Ответ написан
    Комментировать
  • Как сделать анимацию слева на право по примеру?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    .arrow-left span {
        /*border-bottom: 3px solid #ff3140;
        border-left: 3px solid #ff3140;*/
        border-right: 3px solid #ff3140;
        border-top: 3px solid #ff3140;
    }
    
    /*.arrow-left span:nth-child(3){*/
    .arrow-left span:nth-child(1){
        animation-delay: -0.2s;
    }
    Ответ написан
    Комментировать
  • Как применить одну SVG маску к нескольким фото?

    sfi0zy
    @sfi0zy Куратор тега HTML
    Creative frontend developer
    А нельзя ли как-то упростить?


    На вкус и цвет, конечно, но я бы первым делом избавился от всех этих symbol и use. Без них воспринимать код проще, а из условий задачи вроде бы не следует, что они прямо нужны:

    <svg width="200" height="300">
        <mask id="my-mask">
            <g stroke="gray" stroke-width="12" fill="white">
                <circle cx="33%" cy="30%" r="20%" />
                <circle cx="52%" cy="62%" r="32%" />
            </g>
        </mask>
    </svg>
    
    <!-- 1 -->
    <svg width="200" height="300">
        <image href="https://picsum.photos/id/1/200/300" width="200" height="300" mask="url(#my-mask)"/>
    </svg>
    
    <!-- 2 -->
    <svg width="200" height="300">
        <image href="https://picsum.photos/id/2/200/300" width="200" height="300" mask="url(#my-mask)"/>
    </svg>
    
    <!-- ...100500 -->
    <svg width="200" height="300">
        <image href="https://picsum.photos/id/3/200/300" width="200" height="300" mask="url(#my-mask)"/>
    </svg>


    Ну а если вы хотите use, то да, все так, как вы и написали - много id, и следить, чтобы они случайно не продублировались при сборке страницы, а то начнется магия.
    Ответ написан
    7 комментариев
  • Почему верстальщики редко используют CSS clip-path: polygon?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    До того, как IE/Edge стал хромиумным, он не умел работать с clip-path. Соответственно clip-path был "модным решением не для серьезного продакшена". Сейчас стало получше, но привычки так быстро не уходят. Да и не все компании поддерживают исключительно вечнозеленые браузеры. Есть отдельные инертные ниши, в которых пользователи не обновляются так быстро, как хотелось бы веб-евангелистам. В данном контексте SVG - это надежность.
    Ответ написан
  • Как можно с помощью js сделать анимацию исчезновения и появления блоков с учётом того, что у блоков “tab” display: none;?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Свойство display- не анимируемое. С ним ничего не сделать. Можно плавно менять opacity от 1 до 0 и добавлять pointer-events: none, чтобы элементы уходили из под мыши и с ними нельзя было взаимодействовать. Ну и, раз у вас скрипты используются для этого - в конце анимации, когда уже элементы не видны, можно добавить display: none, если на это свойство что-то еще завязано. При появлении - все в обратную сторону - pointer-events: auto и возвращаем opacity.

    Можно все то же самое делать в CSS, из скриптов только классы дергать - это будет более удобным решением для дальнейшей поддержки (когда много CSS меняется в скриптах - обычно начинаются сложности с пониманием происходящего и вынужденное перебивание стилей).
    Ответ написан
    Комментировать
  • Как сделать плавный переход градиента?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Градиенты нельзя анимировать в рамках CSS "в лоб". Но можно сделать несколько элементов с разными градиентами друг над другом и менять им прозрачность:

    Ответ написан
    4 комментария
  • Работа с разными браузерами для фронтенд?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    Есть сервисы для тестирования - BrowserStack, CrossBrowserTesting, и им подобные. Они могут существенно сократить головную боль от необходимости иметь этот самый зоопарк у себя локально.
    Ответ написан
    Комментировать
  • Как реализовать подобную анимацию?

    sfi0zy
    @sfi0zy Куратор тега HTML
    Creative frontend developer
    Это реализуется с помощью свойств stroke-dasharray и stroke-dashoffset в SVG. Слушаем событие скролла - меняем значения. Подробнее в статье про пунктирные вау-эффекты. Вам нужна пятая демка - там как раз вот почти то же самое рисуется при скролле. На сайте Яндекс.Практикума эту линию поделили на небольшие части для удобства/оптимизации, но принцип тот же.
    Ответ написан
    Комментировать
  • Что за потеря контекста webgl и с чем её едят?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    Пытаюсь создать рисовалку на webgl2

    Стоит посмотреть на поддержку WebGL2 в Safari, осознать, что экспериментальная фича даже при "зеленой" поддержке не отличается стабильностью, и подумать еще раз пока не поздно. Но это так, к слову. Раз уж говорим про качество и надежность.

    Что произойдёт с данными при потере контекста? ...потом восстанавливать его? ...старый контекст автоматически удалится или так и будет висеть в небытии?

    По теме есть хорошая заметка из первых рук. Там есть ответы на ваши вопросы с подробностями и примерами кода.

    Может вообще забить на эту потерю контекста? Как часто она происходит? Раз на миллион?

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

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    SVG-маски - наше все. Хотя в этом случае вариант с clip-path тоже очень даже рабочий. Еще есть вариант маски на шейдерах, но это совсем особый случай, хотя может внезапно оказаться очень производительным.

    Ответ написан
    Комментировать
  • Как решить проблему с webkit в tailwind css?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    Каша происходит и в Firefox тоже. Нет Safari, чтобы проверить, но в Firefox все решается заменой .h-screen на .min-h-screen для полноэкранных секций.
    Ответ написан
    3 комментария
  • Неужели translate3d не может быть в процентах?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    В translate3d третий параметр (по оси Z) не может быть задан в процентах. Это и логично - у DOM-элемента нет толщины, от которой считать проценты. Первые два (по осям X и Y) - можно задавать в процентах, с этим проблем нет.
    Ответ написан
  • Как средствами CSS сделать градиент рамки слева и справа блока?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Но я как-то уже делал такое не прибегая к псевдо. Забыл(((


    Как вариант можно линейными градиентами все нарисовать, с помощью border-image:
    .menu-item {
        border-image: linear-gradient(to bottom, transparent 0%, #fff 50%, transparent 100%) 1;
        border-width: 0 0 0 1px;
        border-style: solid;
    }
    
    .menu-item:last-child {
        border-width: 0 1px 0 1px;
    }


    В общем случае можно градиентами на фоне вообще все, что угодно нарисовать.
    Ответ написан
    1 комментарий
  • Почему SVG фильтр не работает?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    Не работает из соображений безопасности. Подробности и многолетние обсуждения со спорами по теме можно загуглить по запросу "CORS SVG".

    Простых решений вашего вопроса два - или грузить картинку с того же домена, что и страница, или сконвертировать ее в base64 и вставить непосредственно в SVG:

    <svg width="0" height="0" viewBox="0 0 450 300">
      <filter id="displacement-map">
        <feImage xlink:href="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQ..." x="0" y="0" width="100%" height="100%" preserveAspectRatio="none"></feImage>
        <feColorMatrix type="saturate" values="0" result="IMAGE"/>
        <feGaussianBlur stdDeviation=".5" in="IMAGE" result="MAP"></feGaussianBlur>
        <feDisplacementMap in="SourceGraphic" in2="MAP" scale="15" xChannelSelector="R" yChannelSelector="R" result="TEXTURED_TEXT"></feDisplacementMap>
      </filter>
    </svg>
    Ответ написан
    6 комментариев