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

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Смешались в кучу кони, люди, GSAP, React, Three.js... Стоит немного систематизировать инструменты хотя бы по задачам, которые они решают. Не привязываясь к конкретным фреймворкам из большой троицы, у нас есть несколько классов инструментов в теме креативных сайтов:

    • Про готовые CSS-анимации - animate.css, Wow.js, и.т.д. Там много динозавров из времен jQuery. Такие штуки часто бывают не в тему дизайна, но стоит посмотреть и забыть. Хотя для сайтов в духе дизайнерской дичи, вроде той, что успешно делают в студии Артемия Лебедева - может быть и ок.
    • Про интерполяцию всего и вся. Тут обычно выбирают между GSAP и Anime.js. Первый вариант - более замороченный, есть полезные плагины, второй - попроще, но тоже хорош, в некоторых кругах даже более популярен. Для совсем простых задач - можно свой инструмент написать.
    • Про скролл, в основном в контексте CSS-анимаций. Тут Locomotive Scroll рулит.
    • Про переходы между экранами. Грубо говоря прокаченный роутер. Самый популярный - Barba.js. Раньше еще был Highway.js, но в последне время что-то про него мало говорят.
    • Про экспорт готовых анимаций из софта для анимаций. Тут нужно отталкиваться от софта. Обычно вопрос возникает в контексте AE и простых мультиков - тут Lottie, говорят, неплох. Но нужно дизайнера заранее консультировать по теме, чтобы лишнего не намалевал.
    • Про визуализацию данных. Тут полезно знать про d3.js, в основном ради готовых примеров.
    • Про трехмерный WebGL, чтобы не писать все руками. Самый популярный вариант - Three.js, в основном за счет экосистемы и горы готовых решений, но есть и альтернативы на любой кус и цвет. Для 2D -эффектов вообще ничего не нужно в большинстве случаев.
    • Плюс не стоит забывать про всякие вспомогательные штуки вроде WebFontLoader, Hammer.js, LeaderLine, и.т.д. К анимациям они не относятся, но в работе могут быть полезны, чтобы не писать все самому.


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

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

    sfi0zy
    @sfi0zy
    Creative frontend developer
    Пытаюсь установить tailwind... при компиляции получается файл, в котором нет всех стилей tailwind... делаю всё четко по инструкции...

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

    Tailwind CSS works by scanning all of your HTML files, JavaScript components, and any other templates for class names, generating the corresponding styles and then writing them to a static CSS file.

    Если вы все делаете по ней, то по идее вы как раз и должны получать минимальный файл, в котором будут только те стили, которые у вас в проекте нужны, а не вообще все, что там в теории могут быть сгенерированы. По вопросу кажется, что все работает именно так, как и должно.
    Ответ написан
    Комментировать
  • Как встроить Math.Random в webgl?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    Стандартной функции rand в glsl в нашем распоряжении нет. Есть популярная реализация:

    float rand(vec2 seed) {
        return fract(sin(dot(seed, vec2(12.9898,78.233))) * 43758.5453123);
    }


    Ее копипастят годами из проекта в проект, и используют, когда нужно что-то нарандомить.

    Но глобальные константы должны быть именно константами, известными на этапе компиляции. На попытку присвоить им значение, вычисленное в какой-то функции - получим ошибки компиляции. Исключения по этой части в glsl делаются только для специальных переменных, в частности для uniform. Они могут быть определены уже в реальном времени. Можно было бы нарандомить все в main, и потом передавать все значения в остальные функции в качестве параметров, но может быть быстрее и удобнее добавить больше uniform-переменных, вроде:

    var tuniform = {
    	SEA_SPEED: {
    		type: 'f',
    		value: Math.random() * 10.0
    	},
    	time: {
    // ...


    в JS, и в шейдере:

    // Вместо
    // const float SEA_SPEED = 0.8;
    // используем
    uniform float SEA_SPEED;
    Ответ написан
    1 комментарий
  • Как обучить глупых студентов функциональному программированию?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    Студенты - инженеры... как обучить фп за 1-2 занятия с нуля? Что бы вы сделали?

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

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

    Тогда может быть align-self: center; должно быть у самой формы?
    Ответ написан
    Комментировать
  • Какое железо нужно что бы работать с последним Unreal Engine?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    Unreal Engine

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

    sfi0zy
    @sfi0zy
    Creative frontend developer
    Можно как-то так нашаманить:

    Идея в том, что просто фильтр с feColorMatrix будет применяться вообще ко всему, нужно сначала выбрать область с конкретным цветом, там его заменить и наложить на оригинальное изображение.

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

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

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

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

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

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

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

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

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

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

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

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Теги - это все же про HTML, а не про CSS.

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

    sfi0zy
    @sfi0zy
    Creative frontend developer
    правильно

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

    с какой скоростью я верстаю

    С какой нужно, с такой и верстаю. Могу верстать быстро, но будет тяп-ляп и на соплях в продакшен, а могу долго и нудно, но будет набор компонентов для космического корабля с перспективой переиспользоваться годами в разных проектах, окружениях и ситуациях (включая работу с читалками, клавиатурой, адаптацию под людей с эпилепсией и.т.д, там много нюансов может быть). Вопрос в задачах бизнеса. Что нужно, то и сделаю.

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

    как преподать себя

    Показать, что ты сделал. Это обычно работает.
    Ответ написан
    2 комментария
  • Как лучше всего сделать данную анимацю?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    svg

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

    на css такое сделать

    Поскольку пути простые, все под 90 градусов - можно и на CSS сделать все это:


    Если сравнивать варианты CSS vs SVG, то у SVG преимущество по скорости разработки, т.к. картинка уже есть, накопипастить анимаций ничего не стоит. С CSS нужно верстать и расставлять всю картинку абсолютным позиционированием. Это время. Но у CSS есть преимущество в виде адаптивности, т.к. мы можем в зависимости от размера экрана легко менять какие-то вещи, переставлять их, и нет проблемы толщины линий, которые в SVG будут так или иначе завязаны на размер SVG и могут стать слишком толстыми или тонкими (вплоть до пропадания) на разных экранах, а в CSS их можно привязать к пикселям. По производительности что то, что это, будет плюс-минус одинаково, не прям супер (много элементов анимируются одновременно), но и явно тормозить нигде не должно.
    Ответ написан
    1 комментарий
  • Договор о непереманивании: можно ли обойти?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    Есть договор. В Европе. Можно как-то обойти?

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

    sfi0zy
    @sfi0zy
    Creative frontend developer
    Невозможно присоединиться к каталогу расширений. Как исправить?

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

    sfi0zy
    @sfi0zy
    Creative frontend developer
    зачем тогда работодатели вообще просят ссылки на аккаунты... Причем часто просят ссылки на Instagram. Что они там хотят увидеть? Посты о программировании?


    Я видел три ситуации:

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


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

    sfi0zy
    @sfi0zy
    Creative frontend developer
    В браузерах есть два варианта WebGL - это WebGL 1 и WebGL 2. В суровой реальности мы можем это округлить до только WebGL 1, т.к. вторая версия все еще не имеет адекватной поддержки браузерами, как на мобильных устройствах, так и на десктопах (в Safari это все еще "экспериментальная фича", да и в остальных браузерах такое впечатление, что только в прошлом году начали фиксить накопившиеся баги и странности). И получается, что в нашем распоряжении из действительно надежных вариантов есть только WebGL 1, где язык GLSL так и остается версии 1.0, в то время как весь мир OpenGL уже ушел до версии 4+ (это уже более свежая версия, чем будет по планам у нас в браузерах, когда появится полноценная поддержка WebGL 2 везде). Так что я бы не стал говорить о полной совместимости реально современного OpenGL и "современного" WebGL.
    Ответ написан
    Комментировать
  • Как сделать круглые (как на картинке) элементы между блоками?

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



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

    Самое главное здесь - подумать об адаптивности и аккуратно прибрать все лишнее на маленьких экранах.
    Ответ написан
    Комментировать
  • С чего начать изучения анимации svg?

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

    Есть три варианта анимирования SVG в рамках фронтенда, два идентичных обычному HTML, и один дополнительный, привнесенный извне:

    1. CSS. Картинку, вставленную в страницу, можно анимировать с помощью CSS в каких-то пределах. Не все так получится сделать, но какие-то простые движения, изменения цветов - вполне можно. Если вы знаете CSS - можно сказать, что уже знаете все, что тут можно сделать.
    2. JS. Все как всегда. Получаем элементы через querySelector, getElementBy... и.т.д., и через setAttribute задаем элементам SVG нужные атрибуты. Обычно удобно добавить какой-то инструмент для интерполяций значений во времени. Из популярного - GSAP и Anime.js. При желании можно что-то свое написать, если задачи совсем простые, в базовом варианте все подобные инструменты строятся примерно по такому принципу. Некоторые инструменты добавляют какие-то еще свои дополнительные возможности, или есть готовые прикольные примеры, сделанные с их использованием, как например у d3.js, но нужны ли они лично вам - нельзя сказать, не зная задач. А инструменты должны выбираться исходя из этих самых задач, а не из моды. Здесь важно лишь понимать, что никакие библиотеки не расширяют сам формат SVG, не привносят никаких принципиально новых возможностей в него, они все больше про организацию скриптов.
    3. Еще есть SMIL. Это древнее зло из миров, далеких фронтенду. Есть хороший туториал на CSS-tricks. Это все "модно-нативно", но иногда сложно синхронизировать с остальными событиями на странице, и сложно отлаживать, т.к. нет адекватной привязки к инструментам разработчика в браузерах.


    Полезно еще познакомиться с вот этой статьей, там отмечены некоторые косяки, связанные с кроссбраузерностью. Да, SVG - это штука, которая вроде бы была с нами всегда, но в контексте анимирования wtf-моментов там все еще достаточно.

    И есть две популярные фишки, которые часто все используют в анимациях - это маски и пунктиры. Способ анимирования не важен, но знать про них полезно.

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

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Если хранить все в одном css/js то пока js загрузиться будет мелькать html сайта а после уже загрузочный экран будет

    Critical CSS можно вставить инлайново в страницу в самом начале. Такое делают и на обычных сайтах, чтобы избежать просвечивания нестилизованного контента при загрузке страницы.

    красивый загрузочный экран, стоит задача создать такой-же... стили и скрипты...

    Скрипты здесь не нужны, можно все на CSS сделать (ну только потом, в основном скрипте, когда он загрузится, нужно будет убрать этот экран). А еще, как вариант, можно воспользоваться древней магией под кодовым названием SMIL для встроенной в страницу SVG-картинки с логотипом и надписью. Будет по сути то же самое, только сбоку.
    Ответ написан
    Комментировать
  • Влияние css3 на скорость сайта и производительность ПК?

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

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