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

Ivan Bogachev

Creative frontend developer
Ответы

  • Математика в FrontEnd?

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

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

    Для сложных SVG-анимаций, шейдеров и нестандартной WebGL-жести в целом, нужно развить у себя математическое чутье, чтобы примерно знать, куда смотреть в случае чего. Я бы сказал, что тут проще перечислить, что не обязательно знать, чем то, с чем все же стоит познакомиться. Можете посмотреть видео Юрия Артюха - он там регулярно использует всякие занятные штуки в этом плане. И тут речь не столько про сеньеров в плане роли в команде, сколько про специфические задачи.
    Ответ написан
    Комментировать
    Комментировать

  • Что случилось с CSS Custom Filters (CSS Shaders)?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Можно загуглить обсуждения того, почему эту технологию в 2014 решили убрать из WebKit. Речь там в основном идет о том, что у CSS Custom Filters были проблемы с безопасностью -> ввели ограничения на их использование -> оказалось, что область применения при таком раскладе очень узкая и по факту они не особо то и нужны -> разработчики хрома остановили разработку на пол года, а в других браузерах по сути и не начинали реализовывать все это. Плюс высказывалась мысль, что лучше сделать набор готовых фильтров. Вот и заглохла идея. На сегодняшний день мы можем использовать WebGL в чистом виде, вне CSS, чтобы решать некоторые из задач, для которых вся эта тема затевалась. Эффекты для картинок можно делать руками, а также есть инструменты вроде HTML-GL, позволяющие накладывать эффекты "как бы на страницу" (там страница с некоторыми ограничениями рендерится в контексте WebGL, ну а дальше все так же, как и с картинками).
    Ответ написан
    Комментировать
    Комментировать

  • Как пофиксить закрытие меню при наведении сохранив отступ между подменю и меню?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Как вариант:
    ul.sub-menu::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 35px;
    top: -35px;
    left: 0;
}
    Ответ написан
    Комментировать
    Комментировать

  • Не работает SVG handwriting анимация. Где ошибка?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    Явно задайте элементу svg размер (width, height) в CSS. Проблема связана с тем, что браузеры могут по-разному определять размер элемента svg, когда он находится во flex-контейнере.
    Ответ написан
    Комментировать
    Комментировать

  • Как делать Flexbox для IE?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    МС браузеры вроде как не поддерживают...

    В таких вещах не стоит гадать, все переменные известны.

    Шаг первый: Идем на caniuse.com/#feat=flexbox и находим там поддержку браузерами.
    Шаг второй: Идем в репозиторий flexbugs и находим список флексбагов.
    Шаг третий: Идем к бизнесу и узнаем список целевых браузеров (он определяется исходя из аудитории).

    Сопоставив эти три вещи вы увидите ответ на вопрос, что использовать или не использовать в конкретном случае.

    P.S.: И да, тестировать все равно стоит.
    Ответ написан
    Комментировать
    Комментировать

  • Где искать клевые сайты (блоги) с информацией для ознакомления?

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

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

  • Почему не работает first-child для первого элемента?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    first-child -> Ничего не происходит.
    nth-child(2) -> работает, но первый элемент считает как второй

    Ну давайте посчитаем:
    <div class="row">
    <div class="col-6">...</div> <!-- Первый -->
    <div class="col-2 px-0 outer_box">...</div> <!-- Второй. Определенно второй. -->
    <div class="col-2 px-0 outer_box">...</div> <!-- Третий -->
    <div class="col-2 px-0 outer_box">...</div> <!-- Четвертый -->
</div>

    Возможно вам стоит еще разок почитать, как работают все эти псевдоклассы.
    Ответ написан
    2 комментария
    2 комментария

  • Где найти задачники по темам JS?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    Прохожу learn.javascript.ru и в конце даётся всего 2-3 примера, которые нужно решить. Их успешно решаю, но хочется прям попотеть. Кто, что посоветует?

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

  • Почему на github вечто отступы не так отображаются?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    как только загрузишь на гитхаб обязательно несколько строк выпадут(

    Используйте только пробелы в коде. Или только табы. Не мешайте табы и пробелы. Табы могут отображаться как 2, 3, 4 или даже 8 пробелов - у всех по-разному, в зависимости от настроек. В результате смесь табов и пробелов в одних случаях выглядит "нормально", но в других случаях "разваливается".
    Ответ написан
    2 комментария
    2 комментария

  • Как исправить ошибку JS?

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

  • Есть ли сервисы по определению браузерной поддержки?

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

  • Есть ли возможность устанавливать плагины css и пользоватся ими без ручного редактирования gulpfile?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Однако целых 20 плагинов каждый раз вручную вписывать

    Так не нужно каждый раз конфиги заново делать. Более продуктивно сделать их один раз и использовать потом во всех проектах (может быть с минимальными изменениями). Это помимо экономии времени даст бонус в виде интуитивного понимания того, какие трансформации есть в конкретном проекте. Если делать каждый раз новый набор руками, то легко самого себя запутать и потом тратить время на "вроде вчера работало, а сегодня - нет", когда какие-то плагины потерялись. Также не забывайте, что можно хранить настройки PostCSS не в Gulpfile, а в отдельном файле - это может быть удобно (как пример).
    Ответ написан
    4 комментария
    4 комментария

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

    sfi0zy
    @sfi0zy
    Creative frontend developer
    У кого какие секреты по поддержанию "боевой" формы котелка? Что едите и пьете для более эффективной интеллектуальной работы?


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

  • Как называется или как сделать такой эффект?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Они используют CSS-градиенты и свойство backgrond-clip:
    5d6fafa56ad05473523050.png
    А перемещают эти градиенты нехитрой анимацией:
    5d6fb22c255d7506444602.png
    Также это можно делать на SVG-масках. Будет более кроссбраузерно.
    Ну и на канвасе можно, по тому же принципу, что и с масками.
    Ответ написан
    4 комментария
    4 комментария

  • Можно ли такое сверстать с помощью CSS и может JS?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Может быть какой-нибудь piechart на максималках?)

    Это не труъ. Настоящие верстальщики делают такие штуки на чистом CSS. А если лениво или времени нет - вставляют в страницу большой картинкой. На самом деле в верстке может быть смысл, если нужна адаптивность - не всегда, но часто ее может быть проще сверстать, чем на лету подгружать разные картинки в зависимости от изменяющегося размера экрана.

    Набросал вам примерчик, думаю раскрасить его градиентами вы уже сами сможете:
    Ответ написан
    1 комментарий
    1 комментарий

  • Как сделать беспорядочное движение элементы?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Юрий Артюх уже рассказывал как подобные штуки делать, так что пересказывать не буду - просто посмотрите. Подход там универсальный - можно и на канвасе и на SVG все делать (хотя канвас по идее более производительным будет).
    Ответ написан
    Комментировать
    Комментировать

  • Как сделать анимацию логотипа?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Скажите, насколько реально сделать эти два варианта с помощью CSS, или для этого нужно использовать другие какие-то технологии/программы?

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

    Запустить крутиться планету

    Все не так уж и сложно - одна сфера, одна текстура. Пример можно посмотреть в статье про трехмерные презентации на Three.js, там все то же самое, только в вашем случае сфера маленькая. Ну а поворачивать землю немного каждый кадр - это даже не задача.

    запустить надпись "Мир принадлежит тебе", тоже с прокруткой в левую сторону вокруг планеты

    Юрий Артюх в одном из стримов делал как раз такую вращающуюся надпись. Очень прикольно получилось, стоит посмотреть.

    P.S.: А еще всегда есть ход сусликом (про которого все забывают, но он есть) - сделать гифку и использовать ее, а не приплетать кучу скриптов для одной маленькой анимированной штучки.
    Ответ написан
    1 комментарий
    1 комментарий

  • Чем заменить position: sticky?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    в большинстве других браузеров просто не работает

    Как вариант всегда есть полифилы, например вот этот.

    какие есть альтернативные методы

    Поговорить с дизайнером и поменять поведение элементов на странице.
    Ответ написан
    3 комментария
    3 комментария

  • Почему так сильно тормозит проект на nuxt?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    Изображения максимально сжаты вместе с видео, следил за утечкой памяти, т.к использую TweenMax, но всё равно без результатов

    Беглый просмотр показал, что вы постоянно анимируете у элементов свойства top, left и height, что вызывает перестройку макета страницы и, соответственно, лаги. Имеет смысл переписать все это с помощью css transform. Более подробно можно почитать в статье про производительность анимаций на сайтах.
    Ответ написан
    5 комментариев
    5 комментариев

  • Почему слик не работает?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    Ошибки там такие:
    GET https://cdpn.io/boomboom/v2/slick/slick.min.js net::ERR_ABORTED 403
pen.js:3 Uncaught TypeError: $(...).slick is not a function

    Разработчик подключал слик локально, а в вашей демке его, разумеется, нет (только pro-аккаунты на codepen могут загружать дополнительные локальные файлы). Так что подключайте его с какого-нибудь cdn, например так:
    <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

    или используйте NPM-пакет, если вы все это как-то по-своему собираете.
    Ответ написан
    1 комментарий
    1 комментарий