Ответы пользователя по тегу Фронтенд
  • За какой срок можно выучиться на junior front-end dev.?

    sfi0zy
    @sfi0zy
    UI developer. Верстаю неверстаемое.
    60% html и css

    А вы уверены? Рекомендую пройтись по списку know it all, чтобы точно понимать, что вы знаете, а что - нет. И это не издевка. Для разработчика очень полезно иметь представление о том, что существует в его языках, кроме того, что он "знает". Это помогает меньше тупить там, где есть стандартное решение, которое можно за секунду загуглить, но только если знаешь, что оно вообще существует в природе.

    что учить после

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

    где найти практику

    Макеты для верстки - в гуглопоиске, интересные примеры и еженедельные челленджи - на CodePen, вопросы из бытовой фронтендерской практики и разные решения для них - тут, на тостере (отвечать тоже полезно, пока объясняешь что-то другому - сам лучше понимаешь).
    Ответ написан
  • Как использовать чистый JS согласно БЭМ?

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

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

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

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

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

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

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

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

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

    sfi0zy
    @sfi0zy
    UI developer. Верстаю неверстаемое.
    Для верстки достаточно школьной математики - складывание, вычитание, умножение, деление, и, очень иногда, понимание синусов и косинусов, чтобы более точно посчитать CSS-трансформации с поворотами, а не на глазок их подгонять.

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

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

    sfi0zy
    @sfi0zy Куратор тега Вёрстка
    UI developer. Верстаю неверстаемое.
    Большая часть ресурсов - ситуативные (в основном это документации к конкретным библиотекам). Из более-менее часто используемого могу вспомнить:
    MDN, DevDocs и Schema.org, чтобы вспоминать забытое.
    Can I use, чтобы смотреть поддержку браузерами (+ doiuse).
    WAVE и regex101, чтобы проверять себя.
    В Browserhacks иногда полезно заглянуть.
    FontPair и Coolors - если нужно без дизайнера подобрать шрифты и цвета.
    Snazzy Maps, чтобы брать готовые цветовые схемы для карт.
    Cubic-bezier, чтобы наглядно делать кривые для простых анимаций.
    Google - если затупил.
    Noisli - для фонового шума.
    Cross Browser Testing, чтобы тестировать результат.
    Ответ написан
  • Как стажировать верстальщиков, когда сам немного опытнее джуна?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    UI developer. Верстаю неверстаемое.
    Как вы прокачивались?

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

    На что стоит сделать упор в обучении именно верстки и малого количества js-а?

    Методы зависят от наличия времени и изначального уровня обучаемых. В целом для развития понимания CSS полезно "рисовать" на нем. Грубо говоря один автопортрет или зверушка, сделанная самостоятельно от начала и до конца, даст опыта как десяток лендингов. В таких песочницах концентрация хитрых задач на верстку в разы выше, чем на обычных сайтах, и обучение идет быстрее. Ну и просто прикольные штуки получаются, можно внести элементы игры с плюшками за успехи. В последние годы эта тема стала очень популярной на CodePen в виде ежедневных разминок для ума.

    Как обучали людей? У меня нет опыта в обучении людей

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

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

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    UI developer. Верстаю неверстаемое.
    Вариантов много. По-хорошему, если вы пишете много простых компонетнов руками на чистом JS, то очень имеет смысл организовать систему классов для них. Один компонент - один класс. Организовать их можно по-разному (мне вот такая структура нравится). Для вашего примера можно начать с простого:

    class MySlider {
        constructor(element, options) {
            const manager = new Hammer.Manager(element);
            
            manager.add(new Hammer.Pan({ threshold: 0, pointers: 0 }));
            manager.on('pan', (e) => {
                const percentage = 100 / options.numberOfSlides * e.deltaX / window.innerWidth;
                
                element.style.transform = `translateX(${percentage}%)`;
            });
        }
    }
    
    [].forEach.call(document.querySelectorAll('.slider-wrapper'), (element) => {
        const slider = new MySlider(element, { numberOfSlides: 2 });
    });


    Затем, чтобы собрать все в одном месте, упростить отладку и избавиться от повторяющегося кода, имеет смысл организовать мини-фабрику по производству компонентов. Что-то вроде такого. Таким образом вы не только решите свою задачу, но и упростите жизнь себе и тем, кто будет ваш код потом поддерживать.
    Ответ написан
  • Какие шаблоны проектирования js применяются на практике чаще всего?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    UI developer. Верстаю неверстаемое.
    какие паттерны применяются чаще всего на практике и где

    Сразу отмечу, что все это чисто мое имхо, которое может не совпадать с мнением окружающих. В контексте фронтенда обычно все довольно просто. По моим наблюдениям в среднем сайте могут иметь смысл:
    1. Модули (делим код на независимые части)
    2. Фабрики (для компонентов интерфейса)
    3. Синглтоны (для хранилищ, точек сбора полифиллов / утилит и.т.д.)
    4. Адаптеры (для зависимостей и полифилов, которые могут измениться / выпилиться)
    5. Наблюдатели (для сбора происходящих событий в одном месте)
    6. Хранители (для сохранения действий пользователя и "Ctrl-Z")
    7. Стратегии (если действуем в зависимости от прилетевших данных)

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

    Важно понимать, что паттерны проектирования - это просто хорошие идеи по поводу того, как организовать большой объем кода в той или иной ситуации. Это не "изучи тайное знание, запомни, и делай так всегда", не "используй паттерны, потому что великие их используют", это скорее "если не уверен как организовать код, возьми готовую идею, она вроде работает". Если вы будете просто решать задачи, то через N лет практики вы сами их все "изобретете", только не будете знать, что у них есть названия. Эффективно будет организовать себе заметку о том, какие из этих идей для чего примерно применяют, а потом, в процессе работы, в нее подглядывать, если встал вопрос "как организовать этот код".
    Ответ написан
  • Разделяют ли в компаниях верстальщика и фронтендера, и как часто подобное встречается?

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

    sfi0zy
    @sfi0zy
    UI developer. Верстаю неверстаемое.
    Не любитель реакта, поэтому про него не буду говорить. А вот CSS покритикую:
    - Стоит прикрутить какой-нибудь препроцессор, поиспользовать вложенность (структура лучше будет видна) и вынести в человеко-понятные константы все, что выносится - цвета, размеры и.т.д. Там достаточно повторений.
    - Стоит поделить все на отдельные файлы-компоненты.
    - Стоит получше подумать над общим разбиением CSS на компоненты. Есть конечно разные подходы, но отдельные кнопки, или группа из нескольких кнопок, или чекбоксы - это универсальные штуки на весь проект. Какой смысл их привязывать к какому-то сайдбару или калькулятору?
    - Про адаптивность вы сами написали.
    - Стили для :focus отсутствуют. Клавиатурой не получится пользоваться.
    - Еще мне кажется, что у сайдбара отступ внизу должен быть (дизайн не видел, но имхо есть). И что cursor: pointer у кнопок должен быть.

    З.Ы.: Еще есть мысль, что вариант "все" там не нужен. "Все" должны показываться при отсутствии фильтров. Но без анализа ЦА не буду утверждать, может там к к такому варианту люди привыкли.
    Ответ написан
  • Что должен знать джун (фронтенд) о linux?

    sfi0zy
    @sfi0zy
    UI developer. Верстаю неверстаемое.
    Видел я людей, которые называли себя программистами и при этом до жути боялись открыть консоль и что-то в ней сделать. Думаю вы встречали таких. Их еще обычно издалека можно опознать по стремлению извратиться как угодно и поставить 100500 плагинов в свою ide, только чтобы не запускать консольку. Они как будно боятся мигающего курсора. Обычно это сопровождается боязнью экспериментов и вообще изучения нового. В первую очередь требование уметь работать с linux отсеивает подобных кандидатов.

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

    sfi0zy
    @sfi0zy
    UI developer. Верстаю неверстаемое.
    Или какие еще хитрости есть по этому поводу?

    Можно сразу вставлять в страницу svg-картинки-заглушки (статейка по теме), а потом уже по ходу дела загружать большие картинки и красиво выводить поверх заглушек. Это не будет ломать логику работы слайдера, просто он будет становиться более четким по мере загрузки.
    Ответ написан
  • Как преобразовать less в css на стороне сервера и получить ответ в css?

    sfi0zy
    @sfi0zy Куратор тега CSS
    UI developer. Верстаю неверстаемое.
    Нагружать сервер компиляцией? А вы уверены, что у вас хватит вычислительных мощностей когда пользователей станет больше? Может лучше на клиенте компилировать (пример)?
    Ответ написан
  • Возможно ли сделать такой переход между различными страницами?

    sfi0zy
    @sfi0zy
    UI developer. Верстаю неверстаемое.
    Пока что я вижу возможность сделать это внутри одной страницы

    Так и делайте внутри одной страницы. Это называется "одностраничное приложение" (SPA - single page application).

    Если возможно, то с помощью каких инструментов?

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

    sfi0zy
    @sfi0zy Куратор тега CSS
    UI developer. Верстаю неверстаемое.
    ...может это какая библиотека js... ...и с помощью js менять длину...

    Не нужен тут никакой JS, только два псевдоэлемента, :hover и transform: scale - codepen
    Ответ написан
  • Как сделать такой же логотип?

    sfi0zy
    @sfi0zy Куратор тега CSS
    UI developer. Верстаю неверстаемое.
    И как вообще это реализовать?

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

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

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


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

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

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

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

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

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

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

    Да, есть - flexbugs.
    Ответ написан