Ответы пользователя по тегу Веб-разработка
  • Начал переводить документацию вебпака. Что скажете?

    sfi0zy
    @sfi0zy
    UI developer. Верстаю неверстаемое.
    Документация - это не тяп-ляп и в продакшен. Документация живет с проектом и требует постоянного обновления. Хуже отсутствующей документации только устаревшая документация. Так что если вы готовы ее постоянно обновлять - то да, это будет полезно по крайней мере новичкам, которые захотели войти-в-айти без английского. Если не готовы, то ваше творение через пару месяцев устареет, а через год его можно будет выкинуть, так как все изменится до неузнаваемости.
    Ответ написан
  • Как использовать чистый JS согласно БЭМ?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    UI developer. Верстаю неверстаемое.
    согласно БЭМ

    Ради ясности стоит отметить, что если почитать первоисточник, то окажется, что БЭМ - это не только про названия классов и разделение всего по файлам, там целый набор инструментов идет в комплекте. Если вы хотите именно использовать весь их стек - то начать стоит оттуда.

    трудно уследить, что бы переменные не повторялись в своих наименованиях

    Было бы логично использовать модули (гугл -> es6 modules).

    P.S.: И почитайте про то, как сейчас скрипты собираются - это не просто склейка всего в один файл, там все немного сложнее.
    Ответ написан
  • Что делает frontend разработчик кроме создание внешнего вида сайта?

    sfi0zy
    @sfi0zy
    UI developer. Верстаю неверстаемое.
    Что делает frontend разработчик кроме создание внешнего вида сайта?

    Пьет смузи, катается по офису на гироскутере, делает умное лицо на конференциях.

    Скучно ли быть фронтендером? Эта однотипная работа?

    Кто-то клепает однотипные магазины на потоке, а кто-то делает замороченные рекламные сайты с кучей анимаций, интерактивные 3d-презентации и другую дичь. Это очень разные вещи. Но рутина наступает везде. Любая сложная область в конечном счете разбивается на набор известных задач, и все, дальше нужно делать почти одно и то же много раз. Принципиально новые проекты - большая редкость в программировании, лишь единицы что-то изобретают, большинство же решает задачи бизнеса. А они особо не меняются. Таков мир. А интерес - понятие очень субъективное. На вкус и цвет фломастеры разные.
    Ответ написан
  • Как сверстать горизонтальный сайт?

    sfi0zy
    @sfi0zy Куратор тега Вёрстка
    UI developer. Верстаю неверстаемое.
    Ответ написан
  • Где искать клевые сайты (блоги) с информацией для ознакомления?

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

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

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

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

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

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

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

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


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

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

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

    sfi0zy
    @sfi0zy
    UI developer. Верстаю неверстаемое.
    Что посоветуете? Брать тестера? Менять разработчиков? Менять процессы?


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

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

    sfi0zy
    @sfi0zy Куратор тега CSS
    UI developer. Верстаю неверстаемое.
    Стоит ли стараться писать "правильно", или просто забить и делать дело?

    Умение писать понятный код точно лучше развить сразу, чем потом переучиваться. Оно очень пригодится, когда вы начнете работать с другими людьми или даже с собственным старым кодом. Тем более, что оно в некоторой степени универсальное - один раз появившись, потом уже не зависит от языков и обстоятельств. Ведь вопрос не только про названия классов, не так ли?

    Вместо того чтобы просто делать я начинаю думать "А как бы мне назвать класс, чтобы потом можно было повторно использовать и т. д."

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

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

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

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

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

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

    sfi0zy
    @sfi0zy
    UI developer. Верстаю неверстаемое.
    Какие языки для его написания необходимы?

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

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

    sfi0zy
    @sfi0zy Куратор тега HTML
    UI 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 захостить - бесплатно и достаточно надежно.
    Ответ написан
  • Как тестируют веб приложение?

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

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

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

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    UI developer. Верстаю неверстаемое.
    disqus

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

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

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

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

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