• Делаются ли на практике подобные сайты?

    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 комментарий
  • Пишут ли в компаниях коммиты в git на русском?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    принято ли в срезе разработки веб приложений СНГ писать коммиты на русском?

    У нас как только не пишут. Бывает, что мешают по несколько языков в одном проекте, в том числе и в компаниях, которые себя позиционируют как очень модные. Все зависит от конкретных людей в конкретном месте.

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

    1. Англицизмов, которые еще и не имеют однозначной транслитерации в кириллицу, что ломает поиск по коммитам.
    2. Названий классов, файлов, или еще каких-то сущностей из мира кода, которые и так уже переведены и есть в исходниках проекта на английском.
    3. Набора базовых глаголов, которые ставят в начале предложений, вроде "добавил", "исправил", "удалил".


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

    sfi0zy
    @sfi0zy
    Creative frontend developer
    2. Откатиться до более раний версии node js 10 или 11 ( не понимаю как сделать )

    Есть утилиты, которые ставят много версий ноды и позволяют между ними легко переключаться. Мне уже не первый год нравится n (работает и в linux, и в macOS). Можно загуглить и другие варианты.
    Ответ написан
    2 комментария
  • Не работает деление в LESS?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Если определить @columns и убрать собачку от 15px, то все работает:

    @columns: 5;
    
    .grid(@columns, @i: 1) when (@i <= @columns) {
        .col-@{i} {
            max-width: percentage(@i / @columns);
            padding: 0 15px;
            flex: 1;
        }
    
        .grid(@columns, @i + 1);
    }
    
    .grid(@columns);
    Ответ написан
  • Как сделать такую анимацию на сайте?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Набор инструментов - это всегда дискуссии из разряда "на вкус и цвет фломастеры разные". Я бы в первую очередь смотрел на:



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

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Ответ написан
    Комментировать
  • Как сделать такого рода эффект?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    не могу найти в поиске

    SVG-маски, маски с помощью clip-path в CSS, маски на канвасе, маски в шейдерах, и.т.д. В общем гуглите все, что связано со словом "маска". Вариант с шейдерами самый производительный, с SVG - самый простой.

    Пример с SVG:


    Пример с шейдерами (не совсем такой, но для передачи идеи пойдет):
    Ответ написан
    Комментировать
  • Как сделать анимацию слева на право по примеру?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    .arrow-left span {
        /*border-bottom: 3px solid #ff3140;
        border-left: 3px solid #ff3140;*/
        border-right: 3px solid #ff3140;
        border-top: 3px solid #ff3140;
    }
    
    /*.arrow-left span:nth-child(3){*/
    .arrow-left span:nth-child(1){
        animation-delay: -0.2s;
    }
    Ответ написан
    Комментировать
  • Как применить одну SVG маску к нескольким фото?

    sfi0zy
    @sfi0zy Куратор тега HTML
    Creative frontend developer
    А нельзя ли как-то упростить?


    На вкус и цвет, конечно, но я бы первым делом избавился от всех этих symbol и use. Без них воспринимать код проще, а из условий задачи вроде бы не следует, что они прямо нужны:

    <svg width="200" height="300">
        <mask id="my-mask">
            <g stroke="gray" stroke-width="12" fill="white">
                <circle cx="33%" cy="30%" r="20%" />
                <circle cx="52%" cy="62%" r="32%" />
            </g>
        </mask>
    </svg>
    
    <!-- 1 -->
    <svg width="200" height="300">
        <image href="https://picsum.photos/id/1/200/300" width="200" height="300" mask="url(#my-mask)"/>
    </svg>
    
    <!-- 2 -->
    <svg width="200" height="300">
        <image href="https://picsum.photos/id/2/200/300" width="200" height="300" mask="url(#my-mask)"/>
    </svg>
    
    <!-- ...100500 -->
    <svg width="200" height="300">
        <image href="https://picsum.photos/id/3/200/300" width="200" height="300" mask="url(#my-mask)"/>
    </svg>


    Ну а если вы хотите use, то да, все так, как вы и написали - много id, и следить, чтобы они случайно не продублировались при сборке страницы, а то начнется магия.
    Ответ написан
    7 комментариев