Задать вопрос
sfi0zy

Ivan Bogachev

Creative frontend developer
Ответы

  • Качество работы штатного программиста. Как оценивать?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    Что посоветуете? Брать тестера? Менять разработчиков? Менять процессы?


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

    А как придет понимание, что есть пользователи и нужно о них заботиться, уже можно говорить о внедрении планок качества или об автоматизации тестирования. Можно начать не с хардкорного TDD, а с более мягкого подхода, соответствующего этой идее: взять что-нибудь вроде codecept.js и по-быстрому описывать сценарии взаимодействия пользователя с системой. Сначала основные, которые обязательно должны работать, потом альтернативные, где обработка ошибок происходит. Собственно и изначальное ТЗ формулировать в виде сценария взаимодействия. Можно отвести под тесты отдельный сервер (ненужное железо всегда можно где-нибудь найти). Потом, как привыкнут, попробовать покрывать все юнит тестами или еще что-то внедрять, своим примером показывая, что это и правда может экономить время на поиск багов или давать какие-то еще полезности. Иными словами стоит сначала перестраивать мышление, а потом уже улучшать технические моменты.
    Ответ написан
    Комментировать
    Комментировать

  • Над чем нужно работать, что улучшать?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    Не любитель реакта, поэтому про него не буду говорить. А вот CSS покритикую:
    - Стоит прикрутить какой-нибудь препроцессор, поиспользовать вложенность (структура лучше будет видна) и вынести в человеко-понятные константы все, что выносится - цвета, размеры и.т.д. Там достаточно повторений.
    - Стоит поделить все на отдельные файлы-компоненты.
    - Стоит получше подумать над общим разбиением CSS на компоненты. Есть конечно разные подходы, но отдельные кнопки, или группа из нескольких кнопок, или чекбоксы - это универсальные штуки на весь проект. Какой смысл их привязывать к какому-то сайдбару или калькулятору?
    - Про адаптивность вы сами написали.
    - Стили для :focus отсутствуют. Клавиатурой не получится пользоваться.
    - Еще мне кажется, что у сайдбара отступ внизу должен быть (дизайн не видел, но имхо есть). И что cursor: pointer у кнопок должен быть.

    З.Ы.: Еще есть мысль, что вариант "все" там не нужен. "Все" должны показываться при отсутствии фильтров. Но без анализа ЦА не буду утверждать, может там к к такому варианту люди привыкли.
    Ответ написан
    3 комментария
    3 комментария

  • Как сделать масштабирование svg по аналогии с background-size: cover;?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Попробуйте добавить preserveAspectRatio="xMidYMid slice" к SVG с этими полигонами.
    Ответ написан
    1 комментарий
    1 комментарий

  • Что лучше использовать для анимаций css или js? И почему?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    но которую можно реализовать и с помощью css, и с помощью javascript...
    ваше мнение хотел услышать

    Мне самому нравится делать все на CSS, но... Если анимация должна быть интерактивной и нужно ее останавливать в процессе, откатывать в изначальное положение и.т.д., или некоторые ее части зависят от данных (в широком смысле - это и движение по сложной траектории, и построение графиков и.т.д.) и их проще рассчитать скриптом, чем подбирать коэффициенты в CSS keyframes, то JS будет лучшим выбором. Если это последовательность мало связанных между собой изменений, то опять же скрипты почти всегда будет проще реализовать. Если речь идет о CSS-анимациях с фильтрами (особенно SVG-фильтрами), то можно влететь в очень сильные проблемы с производительностью на слабом железе. И никакие хаки с GPU тут не помогут - все равно будет тормозить. В такой ситуации может иметь смысл не просто писать на JS, но и подключить WebGL и все делать руками на шейдерах.

    В остальных случаях стоит смотреть по ситуации - разные :hover / :focus эффекты обычно легко реализуются на CSS, и, если это так, то зачем что-то придумывать? CSS в последнее время очень даже неплох. Но если, например, в проекте вся анимация делается на JS, то может иметь смысл продолжать делать так же, сохраняя единообразие в коде.
    Ответ написан
    Комментировать
    Комментировать

  • Как грамотно организовать бойлерплейт для веб-разработки?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    Как грамотно организовать

    Не знаю, как грамотно, поэтому поделюсь, чем сам пользовался. Не самый удобный, но рабочий вариант:
    • есть репозиторий с типовой структурой проекта и этими конфигами (можно даже на своем сервере захостить).
    • у себя локально в типовом проекте он добавляется с помощью git remote add.
    • после обновления конфигов там, с помощью git fetch + git log + git cherry-pick нужные изменения в них добавляются в текущий проект.


    Недавно начал играться с локальным GitLab и возникла мысль автоматизировать этот процесс там, чтобы одной кнопкой все делалось, но что-то пока ничего путного из этого не вышло.

    Была также идея иметь полностью одинаковые конфиги везде (символическими ссылками из одной директории во все проекты добавлять), а значения entry и output, о которых вы говорите, вынести в какой-то локальный для каждого проекта конфиг. Но как-то идея не прижилась - уж слишком она завязывается на расположение проектов и файлов относительно друг друга.
    Ответ написан
    1 комментарий
    1 комментарий

  • Какой аналог БЭМ актуален для использования в верстке и CSS?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Насколько знаю, БЭМ юзает только яндекс.

    БЭМ как методологию организации CSS используют все кому не лень, не только яндекс. В наших краях это наверное самый популярный подход. Про него говорят "не знаешь, что выбрать - бери БЭМ".

    Есть альтернативные подходы к классам в CSS, например RSCSS или даже Atomic CSS, но они не имеют такой распространенности. Хотя познакомиться полезно - как и с разными языками, разные методологии расширяют видение происходящего. А уж что выбирать в конкретной ситуации - на этот вопрос вам никто не ответит. У всего есть свои плюсы и минусы.

    P.S.: Видимо стоит привести пару цитат из первых загугленных статей с css-tricks и csswizardry (в соседнем ответе говорится, что он там пропагандируется), чтобы пояснить, почему я говорю в первую очередь про организацию CSS и намекнуть, что "весь мир заблуждается, что БЭМ — это про CSS и классы через чёрточку":
    - BEM is a popular naming convention for classes in HTML and CSS
    - BEM (Block Element Modifier) is a popular CSS class naming convention
    - BEM – meaning block, element, modifier – is a front-end naming methodology
    Народ во всех этих статьях пишет про методологию именования, а не про "БЭМ - это нечто большее".
    Ответ написан
    Комментировать
    Комментировать

  • Почему npm не устанавливается?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    По идее NPM должен ставиться вместе с нодой, отдельно его уже не нужно доставлять. Но если вдруг его нет:
    1. Попробуйте ставить все не из стандартных репозиториев ubuntu, а по инструкции с сайта самой ноды.
    2. Попробуйте использовать n или какой-нибудь другой менеджер версий для ноды.
    Ответ написан
    Комментировать
    Комментировать

  • Как поменять элементы в массиве?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    Сделать можно тысячей способов, например так:
    let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];

[arr[2], arr[5]]  = [arr[5], arr[2]];
[arr[7], arr[11]] = [arr[11], arr[7]];
[arr[4], arr[9]]  = [arr[9], arr[4]];

console.log(arr); // [1, 2, 6, 4, 10, 3, 7, 12, 9, 5, 11, 8]
    Ответ написан
    1 комментарий
    1 комментарий

  • Чистый CSS для анимации или gsap?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    есть микрофризы и фреймрейт скачет где-то. Стоит ли в таких случаях полностью переходить на js-движок типа GSAP ?

    Важно понимать, что GSAP, Anime.js или еще что-то похожее - это инструменты, которые не приносят ничего принципиально нового в плане технологий. Они просто дают удобный интерфейс, через который мы можем менять значения свойств CSS или каких-то атрибутов SVG. Не более того. Соответственно если у вас есть нормально написанная анимация на чистом CSS/JS и она тормозит, то GSAP ее особо не ускорит.

    есть микрофризы и фреймрейт скачет

    Если есть проблемы с текущими анимациями, то стоит проверить, что:
    - Везде используется transform, а не изменения width, height, top, bottom, margin, background-position и.т.д.
    - По возможности не запускается более одной CSS-анимации в единицу времени.
    - Все js-анимации собраны в один requestAnimationFrame.
    - Все CSS/SVG фильтры по возможности заменены на шейдеры. Советую почитать введение в эту тему и еще примеры.
    - Изменение теней в анимациях по возможности заменено на появление псевдоэлементов с такими фонами.
    - CSS-свойство will-change используется по назначению.
    Ответ написан
    1 комментарий
    1 комментарий

  • Как правильно верстать страницу?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Как будет быстрее и правильнее? Как вы верстаете?

    Если проект предполагает продолжительное существование, то имеет смысл делить все на компоненты и верстать каждый по отдельности, класть их в отдельные файлы. Для каждого компонента это стили, скрипты и пример разметки. Разумеется, все общие данные вроде цветов или размеров отступов имеет смысл сразу выносить в отдельный конфиг. Полезно сразу использовать везде одну и ту же методологию по именованию всего. Какая будет - не важно, главное, чтобы везде одинаковая. Организовать можно по-разному, но суть в том, чтобы работать не со "страницами", а с "набором компонентов".

    Потом имеет смысл сделать страницу, на которой будут все компоненты сайта или группы сайтов (часто бывает, что у одной компании несколько сайтов с одним дизайном) в одном месте с примерами разметки (можно сгенерировать автоматически, инструментов хватает). А потом или методом копипасты или с шаблонизатором (смотря какой проект) клепать страницы десятками и вообще ни о чем не думать. Все это не занимает так много времени, как некоторые думают, а в перспективе происходит экономия на поддержке... Хотя стоп, о чем это я, в нашем мире господствует подход х*як-х*як и в продакшен.
    Ответ написан
    Комментировать
    Комментировать

  • Как сделать glitch эффект в css или JS?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Сходите на codepen и посмотрите демки с первых 3-4 страниц по запросу "glitch". Там есть самые разные варианты того, как этот эффект можно сделать.
    Ответ написан
    Комментировать
    Комментировать

  • Как сделать такой эффект?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    На событие mousemove повешен обработчик, который добавляет transform: translate нужным элементам. Как в этом примере, но только трансформация применяется к контейнеру с картинками-ссылками, а не к глазам.
    Ответ написан
    Комментировать
    Комментировать

  • Генерация аватаров как на Гитхабе?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    К ответу выше добавлю Ucavatar - там аватарки не такие, как на гитхабе, но вдруг тоже пригодится (демо).
    Ответ написан
    1 комментарий
    1 комментарий

  • Как сверстать такой блок?

    sfi0zy
    @sfi0zy Куратор тега Вёрстка
    Creative frontend developer
    Как можно такое сверстать, учитывая адаптив? В какую сторону смотреть? Canvas?

    Такие штуки удобно делать с помощью двух слоев - снизу сам график в виде SVG, сверху тексты в виде обычных div-элементов. Посмотрите последний пример из вот этой статьи, он по смыслу очень похож на вашу картинку.
    Ответ написан
    1 комментарий
    1 комментарий

  • Как модифицировать анимацию с циклами?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Надо что бы анимацию каждый делал поочередно

    .header-icon {
  animation: mymove 3s linear infinite;
  animation-fill-mode: forwards;
}

.header-icon.two{
  animation-delay: 1s;
}

.header-icon.three{
  animation-delay: 2s;
}

@keyframes mymove {
  0%   { transform: translateY(0);     }
  15%  { transform: translateY(-60px); }
  33%  { transform: translateY(0);     }
  100% { transform: translateY(0);     }
}
    Ответ написан
    1 комментарий
    1 комментарий

  • Как сверстать такой элемент?

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

  • Как использовать маску на видео?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    Проще всего поверх видео расположить (абсолютным позиционированием) SVG-картинку с прозрачной дыркой в форме этого пятна.
    Ответ написан
    2 комментария
    2 комментария

  • Где учиться юзабилити и UX?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    Nick Kolenda собирает информацию из кучи разных источников и оформляет в виде длинных-длинных статей. Там такая концентрация информации, что голова может лопнуть. Мне кажется, что перед тем, как платить за какие бы то ни было курсы, стоит хотя бы пару раз пролистать все, что есть у него.
    Ответ написан
    Комментировать
    Комментировать

  • Размытие SVG по маске, как осуществить?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    хотя бы в какую сторону смотреть?

    Смотрите в сторону создания двух слоев с одним и тем же содержимым. К верхнему применяется размытие и маска из градиента. А дальше нужно играть с параметрами до достижения желаемого результата.

    Можно и в обратную сторону - нижний размывать, а к верхнему применять маску, только противоположных цветов.

    Ответ написан
    1 комментарий
    1 комментарий

  • Не видно мои работы в codepen?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    Ваши работы на пару секунд попадают в ленту /pens/recent/. Это тысячи демок каждый день. А может и десятки тысяч. Может быть кто-то увидит ваши в этом потоке безумия, но в лучшем случае это будет пара человек.

    Если ваши работы снабжены релевантным заголовком/описанием/тегами, то другие люди могут их нагуглить (или в местном поиске найти). Будет немного просмотров. Но не сразу и не факт.

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

    Если контент стоящий и он попадет на глаза модераторов (Chris Coyier, Marie Mosley, Gabi, Alex Vazquez, вроде еще кто-то был), то его могут отправить в очередь в ленту /pens/picks/. Полезно шарить свои работы в твиттер - они мониторят упоминания @CodePen. Вам придет оповещение со звездочкой и как очередь дойдет, ваш проект появится там. Путь к известности на СodePen начинается где-то в этой ленте, от нее всего шаг до главной ленты с популярными демками. Там просмотры растут очень быстро.
    Ответ написан
    Комментировать
    Комментировать