Ответы пользователя по тегу Фронтенд
  • Как сделать такой же логотип?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    И как вообще это реализовать?

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

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    Вариант 1:
    У разработчика есть то же ПО, что и у вас. Он может открыть ваш проект и не по описанию и гифке все делать, а по вашим исходникам.

    Вариант 2:
    У разработчика нет возможности открыть ваш проект. Такое вполне может случиться. Например ваш Principle не очень дружит с линуксом. Или еще что-то не так. В такой ситуации желательно иметь:
    • Гифку
    • Гифку x0.1, а то иногда все так быстро движется, что ничего не понятно
    • Список функций, которые вы используете (кривые безье сложно угадывать на глазок, а easing - понятие ооочень растяжимое)
    • Тайминги, по крайней мере продолжительность основных движений в анимации (в небольших взаимодействиях с элементами разница в 50ms может "чувствоваться", но "увидеть" ее сложно)
    • Если есть хитрые соотношения размеров - было бы хорошо иметь описание логики, а то иногда не понятно, идет движение "на 100px" или "на треть высоты элемента"


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

    результат работы фронтенда не устраивает

    Не забывайте о том, что у очень многих (как это ни странно) фронтендеров чувство вкуса отсутствует от слова совсем. Так что для них создание чего-то красивого и нестандартного - это почти пытка. Правда что в такой ситуации делать - не очень представляю.
    Ответ написан
    3 комментария
  • CheckBox поставить "content" не работает [fontawesome]?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Необходимо явно указать, какой шрифт должен использоваться:
    font-family: FontAwesome;
    Ответ написан
    Комментировать
  • Получать правильное значение Rem из px которые даем на вход функции, написал функцию но она работает не корректно, что не так?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    что не так?

    По умолчанию font-size у корневого элемента (html в данном случае) не обязан быть равным 13. Так что нужно его явно задать:
    :root {
        font-size: 13px;
    }
    Ответ написан
  • Кто в production использует flexbox и какие хаки используете для определенных свойств?

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

    Да, есть - flexbugs.
    Ответ написан
    Комментировать
  • Как анимировать SVG path через anime.js?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    проблема в том, что мне нужно рисовать сами буквы, а не их обводку, как это сделать?

    Вам нужно взять векторный графический редактор и нарисовать path`ы не по контуру ваших линий, образующих буквы, а вдоль них, по их середине (если относительно линии можно сказать "середина"), в том направлении, в котором буквы пишутся. Потом задать получившимся path`ам большое значение stroke-width и сделать то, что вы уже сделали с anime.js в вашем примере. Получится примерно то, что вы хотите увидеть. Также будет не лишним взглянуть на свойство stroke-linecap, чтобы добавить округлостей и сделать линию более естественной.

    PS.: Очевидная проблема такого подхода - сложно сделать именно такие скругления на краях букв, как вы нарисовали. Так что если вы хотите в браузере анимировать "рисование" того, что есть, единственный путь - анимация фона у уже имеющихся path-элементов. По сути нужно будет сделать все возможные фоны у каждой буквы по мере ее рисования. Начальный запрос в гугл - fill SVG path element with a background-image, дальше - CSS анимации. Это очень долго, сложно и будет сильно тормозить. В таком случае я бы склонился к тому, чтобы в Ae все нарисовать и гифкой вставить.
    Ответ написан
    Комментировать
  • Будут ли проблемы с индексацией сайта с интерфейсом на vuejs?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    Vue нынче умеет в серверный рендеринг, так что с этим проблем не должно быть.
    Ответ написан
    Комментировать
  • Какие есть интересные сайты со статьями на тему Frontend?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    русскоязычные ресурсы по теме веба? Желательно те, которые обновляются достаточно часто

    Проблема русскоязычных ресурсов в том, что 80-90% контента на них - это переводы. А переводы - это дело такое - их всегда меньше, чем оригинальных статей, и появляются они в большинстве своем с заметным опозданием. Так что не брезгуйте ходить на зарубежные сайты - например на smashingmagazine, css-tricks или uxplanet.
    Ответ написан
    Комментировать
  • Как работает meduza.io без JavaScript? Каким образом рендерятся данные во FrontEnd с выключенным JS?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    При обращении к meduza.io приходят данные и скрипты без отрендеренного html.
    Но если выключить JS, то вроде также приходят необработанные данные, но они все равно рендерятся. Смотрю через инструменты разработчика Chrome.

    А я вот посмотрел через view-source:https://meduza.io/ и увидел там самый обычный html и css. Т.е. чтобы это показать никакие скрипты не нужны. Учитывая жесть от реакта в самой разметке, можно сделать вывод - они рендерят все на сервере (по фэн-шую так и нужно делать).
    Ответ написан
    1 комментарий
  • Какие микро js/css библиотеки/фреймворки посоветуете для изучения?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Простота в изучении... Минималистичность; никаких супернаворотов не надо... будет предоставлять какие-то простые, визуально чистые решения для наиболее часто встречающихся задач... Легковесность... предоставляет больше свободы...

    Для начала стоит попробовать старый добрый VanillaJS - он как раз под ваши требования подходит.

    P.S.: Не сочтите это за юмор, учитывая что
    обычно упоминают Bootstrap. В силу отсутствия какого-либо опыта вообще не могу судить хорош он или плох

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

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Некоторое время назад наткнулся на не очень популярный у нас rscss. Попробовал. Потом еще раз попробовал... Потом еще раз...
    Ответ написан
    2 комментария