Ответы пользователя по тегу Веб-разработка
  • Как сделать такой сайт?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    Горизонтальная прокрутка - transform: translate для контейнера, привязанный к скроллу.
    Косые блоки - transform: skew для блока, skew обратно для контента.
    Размер косого блока удобно выразить через единицы vh.
    Картинкам - object-fit: cover.
    При наведении на блок меняем его opacity до 1, плюс transform: translate для текста и scale для картинки.
    Переходы между страницами - немного css-трансформаций + что-нибудь вроде barba.js.

    Авторы сего шедевра вместо CSS решили все рассчитывать на JS. Не удивительно, что все тормозит.
    Ответ написан
    Комментировать
  • Сайты/каталоги/базы с новыми сайтами и приложениями?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    Интересность - понятие растяжимое и очень субъективное. Но если говорить про те вещи, которые могут быть полезными, то вам поможет twitter, как это ни странно. Подпишитесь на несколько десятков известных людей в интересующей области и будете видеть все полезные сайты и инструменты, которые появляются в их поле зрения. Там же можно найти ботов, которые постят полезности по конкретным темам.
    Ответ написан
    3 комментария
  • Как сделать анимацию трансформирующую один элемент в другой?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    Является ли желтая квадратная форма в конце анимации видоизмененной кнопкой или же это совершенно другой элемент разметки?

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


    С такими анимациями можно долго играться, самое главное - проверить в конечном итоге кроссбраузерность. А то в хроме и FF работает, а в каком-нибудь IE всякое может случиться.

    P.S.: Но в целом - я голосую за реализацию таких вещей целиком на JS. Практика показывает, что в проектах с такими анимациями очень быстро собирается большое количество одновременно анимирующихся значений у большого количества элементов, которые нужно синхронизировать между собой. На CSS голова лопнет все это делать. И да, чем больше всего меняется в CSS-анимациях в единицу времени, тем выше шанс найти какой-нибудь редкий баг и долго ломать себе голову в поисках проблемы. Лучше уж взять какую-нибудь библиотеку вроде anime.js или любимый многими GSAP и использовать их.
    Ответ написан
    Комментировать
  • 3D рендер в WEB?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    Добавлю еще пару слов про эту задачу в целом (не про сайт по ссылке в вопросе, а вообще). Если нужно делать такую статичную штуку с выбором цвета стен, обоев, полов и.т.д., особенно если нужно дать пользователю возможность выбирать свой вариант, то можно поиспользовать SVG. Это немного внезапно, но тем не менее. Основная часть комнаты, тени и рефлексы - это обычная картинка с прозрачностью в нужных местах (ее можно встроить в SVG через тег image), стены, полы - это простые прямоугольники, на которые наложены 3D-трансформации. Дальше их можно заливать как угодно - цветами, текстурами... и не нужно будет ломать себе мозг вопросом о том, как на лету повернуть "нормальную" текстуру и сделать из нее пол с перспективой. Мебель заливается цветом не намного сложнее - делается SVG-маска в форме предмета мебели и применяется фильтр hue-rotate. Таким образом можно "на коленке" соорудить работающий вариант такой презентации.
    Ответ написан
    Комментировать
  • Качество работы штатного программиста. Как оценивать?

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


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

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

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

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

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

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

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

    sfi0zy
    @sfi0zy
    Creative frontend developer
    Какие языки для его написания необходимы?

    HTML, CSS, JS, GLSL. В целом тут все строится на WebGL (Three.js будет хорошим подспорьем) и CSS-анимациях (которые можно по-быстрому вкрутить туда через CSS3DRenderer). Есть любители делать все на WebGL, но это сложно, ведет к костылям и тормозам. Дальше нужно сделать 3D-модели для всего, долго расставлять все по сцене, добавить немного физики, написать пару фрагментных шейдеров, которые размылят картинку где это необходимо, и двигать камеру по сцене. Самое главное тут - производительность, которая сильно зависит от прямых рук разработчика и его способностей к написанию алгоритмов своими руками и последующей оптимизации. Большинство таких сайтов имеют проблемы с производительностью, но обычно это следствие горы скриптов, которые принесли в проект тупой копипастой (часто это чьи-то эксперименты с CodePen, которые никто и не начинал доводить до ума - они показывают идею, но аццки тормозят). Ну и про замысел не стоит забывать - с этим обычно сложнее всего.
    Ответ написан
    Комментировать
  • Как имитировать заполнение формы пользователем?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    Как это может выглядеть?

    Например вот так:
    I.amOnPage('/');
    I.click('Login');
    I.fillField('Username', 'john');
    I.fillField('Password', '123456');
    I.click('Enter');
    I.see('Welcome');

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

    sfi0zy
    @sfi0zy
    Creative frontend developer
    Из популярных вариантов еще можно посмотреть на three.js. Есть raycaster для определения наведения мыши на определенные объекты, вращение камеры вокруг точки делается в пару строк (или можно мышкой прикрутить через OrbitControls), c помощью CSS3DRenderer для этой библиотеки можно интегрировать сверстанные элементы интерфейса прямо в трехмерную сцену, что может быть довольно удобно в некоторых случаях.
    Ответ написан
    Комментировать
  • Есть ли смысл использования Jekyll, а не WordPress?

    sfi0zy
    @sfi0zy Куратор тега HTML
    Creative frontend developer
    Для меня важно: 1. чтобы в URL не было окончаний .html или в этом роде; 2. чтобы если я в корне сайта создам папку "portfolio", а в ней папку с названием проекта "project-name" в итоге получилось так "site.ru/portfolio/project-name"

    С этим проблем не будет.

    возникло ощущение, что по сути он не отличается от обычной верстки. Ведь можно также собирать обычную верстку с помощью Gulp, Sass и шаблонизатора Nunjucks.

    Да, но... Раскидывание постов по тегам и категориям, rss и sitemap, постраничная навигация, поиск, еще что-то... лениво все это делать самому. Jekyll выступает в качестве готовой конфигурации, которую можно взять и использовать для таких задач, не запариваяь о том, что там есть и как оно работает. В этом его предназначение. Понятно, что jekyll не заменит gulp или webpack в задачах вроде сборки современного фронтенда (ну знаете, это когда 100500 модулей, babel или даже typescript, препроцессоры, постпроцессоры и.т.д.), но вопросы именно файловой структуры сайта и всего, что с ней может быть связано, он решает хорошо и без лишних вопросов.

    могу обойтись без админки... или может остаться на WordPress?

    Если хочется просто статичное портфолио - то зачем там какая-то cms? Она будет только тормозить и ничего не делать. А еще статику можно на github захостить - бесплатно и достаточно надежно.
    Ответ написан
    1 комментарий
  • Как тестируют веб приложение?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    Что и как тестируют ???.... простым языком.... смотрю про тестирование, мне кажется там больше заумной терминологии чем реальной работы

    Да нет, там как раз все просто. Грубо говоря есть три уровня:
    • "Делает ли эта функция то, что должна?": Мы (как тестировщики) знаем, что функция делает внутри себя, и убеждаемся, что она продолжает это делать и в будущем. Это именуют модульным или юнит-тестированием. В маленьких проектах обычно его не делают или покрывают такими тестами только определенные части проекта. Помогает оперативно находить изменения в поведении существующих модулей, которые так могут долго оставаться незамеченными и потом не понятно, что вызвало поломку. По идее такие тесты должны в автоматическом режиме проходить перед сборкой кода для продакшена.
    • "Работают ли несколько модулей вместе так, как задумано?": Мы не знаем, что происходит внутри связки, но знаем, что есть на входе и что должно быть на выходе. Это именуют интеграционным тестированием. По идее оно помогает находить проблемы на стыке модулей, когда поведение одного модуля поменяли, а про другой забыли. В реальном мире встречается не так часто, т.к. требует включения мозгов для написания тестов.
    • "Решает ли система задачи пользователя?": Это по-разному называют. Тут идет работа от ТЗ. Мы знаем, что должен получить пользователь от готовой системы в ответ на свои действия, но как она работает внутри нам фиолетово. Наиболее понятный сценарий такого тестирования - заранее написать кейсы, примеры того, как пользователь решает какую-то задачу, а потом перед каждым релизом "прокликивать" нужные последовательности кнопок или что-то вроде того. Это могут делать руками (студенты-обезьянки) или можно автоматизировать. Посмотрите примеры использования CodeceptJS и все станет ясно. По-хорошему это стоит делать на проектах любого размера, но на практике...

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

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    disqus

    Этим все сказано. Запрос делает он. Несколько месяцев назад кто-то на сайте самого disqus жаловался на проблему с долгой загрузкой и как раз запросами на vanillavalue, но видимо так и не решили этот вопрос.

    Что эта за шалапань?

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

    Как его победить?

    Никак. Если есть такая возможность, то можно поиграться с CSP на ваших сайтах. Люди говорят, что с помощью этой штуки можно уменьшить количество запросов и немного ускорить загрузку disqus. Но от зомби серебряная пуля может и не спасти. Будьте готовы к тому, чтобы со временем перейти на другую систему комментирования.
    Ответ написан
    2 комментария
  • Как вставить CSS стили только для IE и Edge?

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

    На browserhacks.com есть хорошая подборка хаков для определения самых разных браузеров и их версий с помощью CSS или JS. Попробуйте варианты, которые там предлагаются. И будьте внимательны: если вы используете автопрефиксер или что-то для оптимизации CSS, то эти инструменты могут незаметно ломать некоторые хаки при сборке.
    Ответ написан
    Комментировать
  • Как реализовать такую анимацию оленя?

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

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Тот самый момент, когда небольшое количество JS сильно упрощает дело. Посмотрите вот этот пример.
    Ответ написан
    2 комментария
  • Как сделать такой же логотип?

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

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

    sfi0zy
    @sfi0zy
    Creative frontend developer
    Проведите процедуру локально и скопируйте не только папку www, но и node_modules. У проекта есть пара зависимостей (их можно посмотреть в файле package.json), которые будут установлены в нее при выполнении npm install. И, разумеется, сама нода должна быть установлена на сервере.
    Ответ написан
    2 комментария
  • Как удобнее проставлять размеры, цвета в макетах дизайна сайта для программистов?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    По фен-шую нужно делать стайлгайд. В нем должна быть наглядно показана типографика, цвета, стандартные размеры отступов (их обычно немного, можно для каждого написать, что вот этот для заголовков, вот этот для того-то, а вот этот по умолчанию) и компоненты интерфейса по отдельности (включая все их состояния). Как потом будут выглядеть сами макеты, будут ли они кривыми и косыми - не важно, они могут быть хоть от руки карандашом нарисованы, ибо их смысл в том, чтобы показать взаимное расположение компонентов, а вся остальная информация есть в стайлгайде. Такой подход может экономить кучу времени, избавляет дизайнера от необходимости рисовать макеты страниц с точностью до пикселя, а компонентная верстка становится очень приятным занятием. Разумеется, в интернете можно найти достаточно примеров по запросу ui style guide example.
    Ответ написан
    1 комментарий
  • Как реализовать плавный якорь на чистом(Нативном) JavaScript?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    Этот функционал находится в стадии черновика и в некоторых браузерах уже есть из коробки. Вероятно вам нужен smooth scroll polyfill. Разумеется никто не мешает в образовательных целях посмотреть его исходники.
    Ответ написан
    1 комментарий