Ответы пользователя по тегу Фронтенд
  • Какие полезные ресурсы используете в работе?

    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.
    Ответ написан
  • Как анимировать SVG path через anime.js?

    sfi0zy
    @sfi0zy
    UI developer. Верстаю неверстаемое.
    проблема в том, что мне нужно рисовать сами буквы, а не их обводку, как это сделать?

    Вам нужно взять векторный графический редактор и нарисовать path`ы не по контуру ваших линий, образующих буквы, а вдоль них, по их середине (если относительно линии можно сказать "середина"), в том направлении, в котором буквы пишутся. Потом задать получившимся path`ам большое значение stroke-width и сделать то, что вы уже сделали с anime.js в вашем примере. Получится примерно то, что вы хотите увидеть. Также будет не лишним взглянуть на свойство stroke-linecap, чтобы добавить округлостей и сделать линию более естественной.

    PS.: Очевидная проблема такого подхода - сложно сделать именно такие скругления на краях букв, как вы нарисовали. Так что если вы хотите в браузере анимировать "рисование" того, что есть, единственный путь - анимация фона у уже имеющихся path-элементов. По сути нужно будет сделать все возможные фоны у каждой буквы по мере ее рисования. Начальный запрос в гугл - fill SVG path element with a background-image, дальше - CSS анимации. Это очень долго, сложно и будет сильно тормозить. В таком случае я бы склонился к тому, чтобы в Ae все нарисовать и гифкой вставить.
    Ответ написан
  • В каких случаях использовать ES6 Class?

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

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

    не могу найти место применение классов при создании интерфейсов

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

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    UI developer. Верстаю неверстаемое.
    Vue нынче умеет в серверный рендеринг, так что с этим проблем не должно быть.
    Ответ написан
  • Как на Vue сделать динамическое добавление полей?

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