Ответы пользователя по тегу Веб-разработка
  • Что за проблемы с наложением, бордерами в хроме в последнее время?

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

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

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

    Ответ написан
    6 комментариев
  • Как сделать анимированную трансформацию svg при hover?

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

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

    Ответ написан
    Комментировать
  • Есть ли какой то список что нельзя использовать в 2022 году при разработке с поддержкой IE 11?

    sfi0zy
    @sfi0zy Куратор тега Вёрстка
    Creative frontend developer
    Чтобы не перепечатывать каждое свойство в caniuse

    doiuse?
    Ответ написан
    Комментировать
  • Кто должен анимировать 3d-модель перед выкладыванием на сайт (художник или программист)?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    Кто должен делать [название действия]

    Как договоритесь, так и будет. Абсолютных ответов может и не быть, все зависит от умений и загруженности участников команды. В креативной разработке часто можно встретить людей, которые умеют делать что-то не только по своей основной специальности, но и по смежным.

    бег/ходьба/прыжок/дыхание

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

    sfi0zy
    @sfi0zy
    Creative frontend developer
    Делаются ли на практике подобные сайты?

    Делаются. Рынок таких дизайнерский сайтов всегда был не очень большим, но он есть. Познакомиться с разными примерами таких сайтов можно на сайтах вроде Awwwards, CSS Design Awards, FWA и им подобных. В русскоговорящем сегменте интернета в целом таких проектов меньше, но они тоже есть. Ну и не все отправляют свои сайты на конкурсы, не всем это нужно.

    как у них осуществляется адаптив?

    С точки зрения разработчика - так же, как и на любом другом сайте. Никаких сюрпризов, только "уверенные знания CSS/SVG/JS/GLSL" должны быть в реальности, а не на бумажке.

    Из соседнего комментария: только проблема в том, что в 99% - всё это неюзабельное говно в красивой обертке

    Часто можно встретить такого рода сайты, красивые, но забагованные в край, и тормощящие настолько, что телефоны просто вешаются. Или мобильных версий вообще нет, т.к. не осилили в сжатые сроки. А бывает, что и на десктопах тормозит и лагает. Но тут вопрос больше к бизнесу - за сколько заплатили, то и получили. Если разработчики тянут, то остается дизайнер. Вот ему может быть сложно, и на самом деле не так много дизайнеров, которые могут что-то такое проектировать, чтобы и красиво, и адаптивно, и юзабельно одновременно. Нужен опыт. Нужно много чего знать, и, что важно, уметь слушать разработчиков на тему того, что можно, а чего нельзя сделать, и вести соответствующие переговоры с заказчиком. На рынке фриланса не раз видел заказы в духе "нам тут дизайнер все придумал, а мы теперь сделать не можем", или "мы что-то сделали, а оно грузится по пол минуты", а это вообще никак не сделать, чтобы нормально работало на реальном железе. Тут нужен был диалог между специалистами из разных областей, а его не было. Но опять же - за сколько заплатили, то и получили.
    Ответ написан
    Комментировать
  • Что за потеря контекста webgl и с чем её едят?

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

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

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

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

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

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

    sfi0zy
    @sfi0zy
    Creative frontend developer
    • Белый по светлому не читается. Белый по пестрому - тем более. Голубой по голубому - ох...
    • Странное смешение шрифтов с засечками и без. Никакой системы в этом не наблюдается. Какую задачу эта разница решает - непонятно.
    • Очень много разных размеров шрифтов и межбуквенных интервалов. Проблема та же - нет системы.
    • Отступы везде разные. Внизу их вобще нет. Проблема та же.
    • Местами намешана информация. Глаза разбегаются. Здесь явно прослеживается идея поэкранного скролла, или чего-то вроде него, но стоит подумать над тем, чтобы каждый экран был о чем-то одном. Первый про то, что это такое (зачем там какие-то характеристики про опыт и духов?), дальше описание сервера (зачем там реклама справа?), магазин вообще спрятался в куче рандомных фактов по краям, я его в первый раз даже не заметил.
    • Не совсем понятно, как это должно адаптироваться под разные размеры экранов.

    В целом докапываться можно много к чему, перечислять нет смысла, но общий посыл такой:

    1. Обращайте внимание на систему в дизайне. Загуглите, что такое дизайн-система и почему простота и последовательность - это хорошо.
    2. Думайте больше о доступности и адаптивности. Вы дизайн делаете для пользователей в первую очередь. Красочная картинка вторична.
    3. Не нужно нагромождать все, как в газете. Это очень редко работает. Управляйте вниманием пользователей, не давайте ему растекаться во все стороны.


    P.S.: Также в таких проектах всегда нужно быть готовым к диалогу с разработчиком и не допускать требований pixel-perfect по согласованным без него макетам. Это не так сложно сверстать, но вот эти штуки по краям с линиями и кубиками будут генерироваться на лету (для адаптивности). Они не будут 100% соответствовать нарисованному. Также тут так и напрашивается все эти картинки анимировать, как на текущем сайте mtg. Не знаю, как этот стиль называется, но WebGL - наше все. Да и эти кубики я бы сделал неспешно плывущими более-менее вниз с покачиваниями и поворотами... Но это уже следующий шаг. Первое - система в дизайне и доступность.
    Ответ написан
    1 комментарий
  • Какие вы используете инструменты для ускорения верстки макетов?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Есть несколько сторон вопроса:

    1. Часто повторяющиеся рутинные действия, вроде копирования файлов, выделения critical css или обработки картинок. Для этого есть gulp + плагины под конкретные задачи.
    2. Разделение кода по модулям, добавление синтаксических возможностей, убирание мусора из кода. Вопрос удобства и ускорения ориентирования по нему. Обычно это pug, less, postcss, в частности autoprefixer, ну и babel, куда без него.
    3. Это все нужно собрать. Тут webpack или снова gulp + плагины. Можно webpack запускать через gulp, как одну из задач. Ну и browsersync, чтобы руками не перезагружать страницу.
    4. Ускорение написания кода. Тут emmet + умение работать с текстовым форматом как таковым. Порой vim с множественными курсорами кажется чем-то космическим.
    5. Страховки от ошибок - w3c validator, stylelint, doiuse, eslint, sonarjs. Сильно недооцененная тема, но экономит много времени на отладке.


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

    sfi0zy
    @sfi0zy
    Creative frontend developer
    нет 3d модели предмета

    но
    модель крутится

    Если вы хотите сделать вращение модели, то вам в любом случае нужна либо 3d-модель и отображение ее с помощью WebGL, либо куча картинок с видами на нее со всех сторон с разницей в N градусов и последовательное их показывание пользователю (ну или видео, что по сути - тот же набор картинок). Но тут важно отметить, что обычно такие картинки не рисуют прямо руками, а делают модельку и потом ее рендерят с разных сторон, т.к. это получается быстрее, чем рисовать.

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

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

    sfi0zy
    @sfi0zy
    Creative frontend developer
    0. Делим 360 градусов на N частей. Получаем N направлений.
    1. Делаем по картинке с коробкой для кажного из направлений. Сохраняем по порядку.
    2. Загружаем все картинки (по одной, или спрайт с ними) на клиента.
    3. Выводим на канвас по одной картинке, выбирая их в зависимости от позиции скролла.

    Альтернативно - то же самое, но вместо канваса меняем url у элемента img (именно так у них сделано).
    Альтернативно - сообразить 3D модель коробки, текстуру и загуглить, как делать презентации товаров на Three.js.
    Ответ написан
    4 комментария
  • Анимация на canvas/js?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    На CSS вы это никак не сделаете - там неравномерное растяжение картинок присутствует. Тут "начальник отдела разработки" либо не шарит во фронтенде, либо пытается сбить цену. Но штука из разряда "ябзаверстал", а я тут как раз собираю коллекцию примеров с шейдерами, так что набросал похожий эффект для нее, только без кляксы в центре (там есть немного лишнего кода, но это издержки, чтобы серия примеров не сильно отличалась).


    * Если вдруг будете копировать себе, не забывайте про лицензию.
    Ответ написан
    8 комментариев
  • Как уменьшить svg код?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    Пример километрового SVG


    Это не SVG. Это обычная растровая png картинка, которую закодировали в base64 и вставили в SVG. Сжать никак не получится (ну то есть насколько вы растровую картинку сожмете?). Вам нужно эту штуку нарисовать изначально в векторе, тогда она будет маленькая и аккуратненькая.
    Ответ написан
    3 комментария
  • Где можно найти звуковые эффекты для сайта?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    На freesound.org есть много всего, в том числе и звуки разных кнопок (по запросу "button").
    Ответ написан
    Комментировать
  • Начал переводить документацию вебпака. Что скажете?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    Документация - это не тяп-ляп и в продакшен. Документация живет с проектом и требует постоянного обновления. Хуже отсутствующей документации только устаревшая документация. Так что если вы готовы ее постоянно обновлять - то да, это будет полезно по крайней мере новичкам, которые захотели войти-в-айти без английского. Если не готовы, то ваше творение через пару месяцев устареет, а через год его можно будет выкинуть, так как все изменится до неузнаваемости.
    Ответ написан
    1 комментарий
  • Как использовать чистый JS согласно БЭМ?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    согласно БЭМ

    Ради ясности стоит отметить, что если почитать первоисточник, то окажется, что БЭМ - это не только про названия классов и разделение всего по файлам, там целый набор инструментов идет в комплекте. Если вы хотите именно использовать весь их стек - то начать стоит оттуда.

    трудно уследить, что бы переменные не повторялись в своих наименованиях

    Было бы логично использовать модули (гугл -> es6 modules).

    P.S.: И почитайте про то, как сейчас скрипты собираются - это не просто склейка всего в один файл, там все немного сложнее.
    Ответ написан
    Комментировать
  • Что делает frontend разработчик кроме создание внешнего вида сайта?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    Что делает frontend разработчик кроме создание внешнего вида сайта?

    Пьет смузи, катается по офису на гироскутере, делает умное лицо на конференциях.

    Скучно ли быть фронтендером? Эта однотипная работа?

    Кто-то клепает однотипные магазины на потоке, а кто-то делает замороченные рекламные сайты с кучей анимаций, интерактивные 3d-презентации и другую дичь. Это очень разные вещи. Но рутина наступает везде. Любая сложная область в конечном счете разбивается на набор известных задач, и все, дальше нужно делать почти одно и то же много раз. Принципиально новые проекты - большая редкость в программировании, лишь единицы что-то изобретают, большинство же решает задачи бизнеса. А они особо не меняются. Таков мир. А интерес - понятие очень субъективное. На вкус и цвет фломастеры разные.
    Ответ написан
    2 комментария
  • Как сверстать горизонтальный сайт?

    sfi0zy
    @sfi0zy Куратор тега Вёрстка
    Creative frontend developer
  • Где искать клевые сайты (блоги) с информацией для ознакомления?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    Я натыкаюсь на такие блоги случайно и редко... Где и как искать... с раскрытием инфы на острие... на кого вы подписаны и не нарадуетесь?

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

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    Библиотека panolens.js хочет иметь конкретную версию three.js, которая прописана у нее в зависимостях (на данный момент 0.105.2), а у вас используется другая версия. Замените three.js в вашем проекте на версию 0.105.2 - npm хранит старые пакеты, так что с этим проблем быть не должно.
    Ответ написан
    Комментировать